vue 跨页面锚点定位

  • Z时代
  • 2024-01-10
  • 分类：综合

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

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

--  

没有做锚点前的效果

以上是 vue 跨页面锚点定位 的全部内容， 来源链接： utcz.com/z/377510.html

回到顶部