Vue从一个页面跳转到另一个页面指定位置

从A页面跳转到B页面指定的位置

1.B页面,在跳转到的指定位置添加id名(eg: id=‘titlGov’)

Vue从一个页面跳转到另一个页面指定位置_第1张图片

2.A页面添加点击事件

Vue从一个页面跳转到另一个页面指定位置_第2张图片

    jump(e) {
      if (e == "第三方会员") {
          localStorage.setItem("cec", "titlCec");
          this.$router.push({ path: "/turnOverTwo"});
      }
     if (e == "政府会员") {
          localStorage.setItem("cec", "titlGov");
          this.$router.push({ path: "/turnOverTwo"});
      } 
      if (e == "企业会员") {
          localStorage.setItem("cec", "titlVip");
          this.$router.push({ path: "/turnOverTwo"});
        } 
      } 
    },

 3.B页面

  created() {
    this.$nextTick(() => {
      this.toLocal();
    });
  },


  mounted() {
      // 监听滚动事件,然后用handleScroll这个方法进行相应的处理
      window.addEventListener("scroll", this.handleScroll);
  },


 //用完后记得将存储的锚点置空,否则会影响其他页面跳转到当前页面
  destroyed() {
    localStorage.setItem("cec", "");
  },


  methods: {
    // 滑动
    toLocal() {
      //查找存储的锚点id
      let Id = localStorage.getItem("cec");
      let toElement = document.getElementById(Id);
      //锚点存在跳转
      if (Id) {
        toElement.scrollIntoView();
      }
    },
  }

效果图

A页面

Vue从一个页面跳转到另一个页面指定位置_第3张图片

 点击政府会员,跳转到B页面 

Vue从一个页面跳转到另一个页面指定位置_第4张图片

你可能感兴趣的:(Vue零基础学习,前端)