vue 跨页面锚点

• 右侧有一个悬浮菜单栏是全局的，点击之后需要跳到商城的锚点，然后开始想在query里将锚点id带过去，但是页面刷新之后参数还会存在，就改用localstorage将锚点存起来了。

1.点击锚点按钮之后，将锚点id存起来再跳转页面

    localStorage.setItem('mallId', 'gift');
    this.$router.push(path);

2.在商城页面的mounted里面判断缓存里是否有锚点id，有就跳转到锚点。监听页面刷新时删除锚点

mounted() {
        let selectId = localStorage.getItem('mallId');
        if (selectId) {
            this.$nextTick(() => {
               let anchor = document.querySelector('#' + selectId);
               let total = anchor.offsetTop;
                document.body.scrollTop = total;
                document.documentElement.scrollTop = total;
            });
            window.addEventListener('beforeunload', this.removeSelectId);
        }
    },
    methods:{
     removeSelectId() {
            localStorage.removeItem('mallId');
        }
    }

3.页面销毁时删掉锚点，移除刷新事件监听

 destroyed() {
        this.removeSelectId();
        window.removeEventListener('beforeunload', this.removeSelectId);
    }

4.感觉给锚点加一点动画比较自然。。动画效果使用的一个大佬的代码，链接：https://www.cnblogs.com/shaozhu520/p/10131268.html的。