Vue跨页面锚点定位 - z_xun

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