Vue跨页面锚点定位

App公共页面

 <dd @click="goto('/','productModel')">产品模型</dd>
goto(page, selectID) {
      console.log(this.$route.path, "this.$route.path");
      if (page == this.$route.path) {  //如果当前已经在这个页面不跳转 直接去
        let toElement = document.getElementById(selectID);
        toElement.scrollIntoView(true);
      } else {  //否则跳转路由
        localStorage.setItem("toId", selectID);
        this.$router.push({ path: page });
      }
    },

B页面

 created() {
    //创建时执行跳转锚点位置
    this.$nextTick(() => {
      this.getlocal();
    });
  },
 //从我本地找到id
    getlocal() {
      //找到锚点id
      let selectId = localStorage.getItem("toId");
      let toElement = document.getElementById(selectId);
      //如果对应id存在,就跳转
      if (selectId) {
        console.log(toElement,'toElement')
        toElement.scrollIntoView(true)
      }
    },
    //离开页面进行对localStorage  id销毁,避免其他入口进来有锚点问题
    destroyed() {
      localStorage.setItem("toId", "");
    },
原文地址:https://www.cnblogs.com/xiaoxiaoxun/p/14088800.html