hz-vue 路由生命周期钩子

需求==》实现跳转 返回到指定为位置。

思路==> 跳转前  中  后   前：保存页面文档距离顶端距离  中：  存到可以保存的容器中( 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中的方法回调。