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",'')
        }

---

首頁跳轉子頁，首頁跳轉錨點效果

--  

沒有做錨點前的效果