vue实现不同页面间锚点跳转

A页面跳转至B页面

A页面

<p @click="toAim('auchorId')">内容</p>//auchorId是B页面指定位置的id
//先将id存放在本地
toAim(id){
	  localStorage.setItem("anchorId", id);
      this.$router.push({
        name: "Home",//跳转页面的name,如果目标位置内容是组件则name是父组件的name
      });
}

B页面

created() {
    this.$nextTick(() => this.getLocal());
  },
methods:{
  getLocal() {
      let select = localStorage.getItem("anchorId");
      let elm = document.getElementById(select);
      if (select) {
        elm.scrollIntoView(true);
      }
    },
  }
  //页面销毁时将auchorId设为空,防止其他页面进入是有锚点问题
   destroyed() {
    localStorage.setItem("anchorId", "");
  },

【 解说】

Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。
vue实现不同页面间锚点跳转参考可见:Element.scrollIntoView
this.$nextTick()
用法:
将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。

参考可见:vm.$nextTick( [callback] )

自己测试的,页面加载后跳转至描点处

首先在页面中还是要将Id存放在本地,其他与B页面相同

上一篇:vue.nextTick()方法的使用详解


下一篇:elementui tab切换时,echart图显示宽度问题