需求==》实现跳转 返回到指定为位置。
思路==> 跳转前 中 后 前:保存页面文档距离顶端距离 中: 存到可以保存的容器中( localstorage/ ? # history /类似 vuex)中
后:等到回退的时候 监听回退 然后获取存储 执行滚动
具体实现
前:获取 beforeRouterLeave(to,from,next){// 可以监听路由离开前 或者 点击事件中触发获取
let position=window .scrollY;
if(postion==null) position=0;
//离开的时候把postion存到 vuex中
this.$store.commit("changeRecruitScrollY",postion);
next();
}
中 :存 mutations:{
//mutation是唯一可以改变state状态的方法。 监听action传递的方法 执行
changeRecruitScrolly(state,recruitScrolly){// recruitScrolly是形式参数
state.recruitScrolly=recruitScrolly;
}
}
后:执行 watch:{
"$route"(to,from){
if(to.name=="当前回退到的路由"){
let recruitScrollY= this.$store.state.recruitScrollY;
window.scroll(0,recruitScrolly)
}
}
}
}
参考网址 :https://blog.csdn.net/u013144287/article/details/78985687
总结 重点 注意事项
重点 实现业务需求功能的 分步 和链接
获取 存储 调取 获取后如何存储 存储后如何再次调取何时调取
注意事项 一是 vuex 存储的机制 二 何时触发 存储和调取
vuex 是通过 action 中的commit 提交给 mutation 方法 去执行改变state 存储的值
state是vuex对象的属性 action和mutation是 对象的方法 在action异步的传递给==》触发mutation同步处理state中的方法回调。