vue 跨页面锚点定位

 

 

 

1.使用的是localStorage存储id的值，点击存储id的值

goto方法，

           goto(page,selectId){
            var path = page;
            var selectId = selectId;
            localStorage.setItem("toId",selectId);
            this.$router.push({path: path});
        }
父页面的的html文件

 js  goto方法 记录id的值

---

 

 子页面的html内容，id名统一

 子页面的生命周期

        created(){
//创建时执行跳转锚点位置
            this.$nextTick(() => {this.getlocal()})
        },
        mounted:function(){
            let that = this;
            that.$nextTick(function(){
                window.addEventListener('scroll',that.handleScroll)
            })
            console.log("mounted")
        },
        methods:{
            //从我本地找到id
            getlocal(){
                //找到锚点id
                let selectId = localStorage.getItem("toId");
                let toElement = document.getElementById(selectId);
                //如果对应id存在，就跳转
                if(selectId){
                    toElement.scrollIntoView()
                }
            }
        },
//离开页面进行对localStorage  id销毁，避免其他入口进来有锚点问题
        destroyed(){
            localStorage.setItem("toId",'')
        }

---

首页跳转子页，首页跳转锚点效果

--  

没有做锚点前的效果

 

转载于:https://www.cnblogs.com/jiayeyuan/p/10114205.html