zoukankan      html  css  js  c++  java
  • 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", "");
        },
  • 相关阅读:
    软件课设Day18
    软件课设Day17
    软件课设Day16
    2019/09/12最新进展
    2019/09/11最新进展
    2019/09/10最新进展
    2019/09/09最新进展
    2019/09/08最新进展
    2019/09/07最新进展
    2019/09/06最新进展
  • 原文地址:https://www.cnblogs.com/xiaoxiaoxun/p/14088800.html
Copyright © 2011-2022 走看看