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