详解使用Vue路由器导航钩子与Vuex来实现后退状态保存 - 行业资讯

不好意思,标题比较啰嗦,因为这次的流水账确实属于一个比较细节的小东西,下面详细讲:

<强> 1需求

最近在使用electron-vue开发一个跨平台的桌面端软件,刚上手写了几个页面,遇到一个问题:桌面端软件通常会有导航需求,类似下图

导航按钮

点击返回按钮,返回上一页,并且显示上页内容。其实不止应用,即使普通的网页中也会有此类需求,尤其是使用vue写温泉时。
　　

项目中的导航几乎都是采用路由器。推动({name:“xxx”,参数:{xxx: 123…}})这种方式。这种方式导致的一个直接问题是:当点击后退按钮(调用router.go(1)时,历史中只保存了URL而丢失了参数对象,进而导致依赖params的页面渲染异常。
　　

<强> 2解决

其实思路很简单,既然是在后退操作中丢失了params,那么我们自然会想到:如何保存一下params !没错,就是这么粗暴,你既然要丢,我就把你保存一下!

怎么存:其实想都不用想这是一个跨组件通信问题拉,所以很自然的,用Vuex保存是最合乎常理的咯!
　　

什么时候存:第一反应,调用路由器。推动({name:“xxx”,参数:{xxx: 123…}})时保存,然后如果导航回到这个URL,如果没有参数,尝试从vuex商店里取。似乎没错,就是麻烦了点儿! !别慌,咱们有导航钩子路由器。beforeEach(下),从=比;{//瓆)啊!
　　

正如其名,vue-router提供的导航钩子主要用来拦截导航,让它完成跳转或取消。
　　

说到这儿,你应该完全明白我的解决思路了,那下面废话就不多说了,上代码:

　　　　/* 　　Vuex商店定义存储对象RouterParams 　　*///? 　　const状态={//定义一个存储地图,关键:导航名称、值:导航参数　　paramMap: {} 　　} 　　　　const突变={ 　　REFRESHPARAM(状态,paramKV) {//突变,应该能看懂做的操作吧? 　　Vue.set(状态。paramMap paramKV。键,paramKV.value) 　　} 　　}//? 　　之前　　
　　　　　　/* 　　路由器中设置一个全局导航钩子　　*/const路由器=new VueRouter ({…})//路由器　　路由器。beforeEach(下),从=比;{//只有在找不到参数时才“出此下策” 　　如果(种(to.params)。长度===0){//从店中取出付给params,此处注意路径未必完全吻合,以你的为准　　Object.assign (。params, store.state.RouterParams.paramMap [to.name] | | {}) 　　}//存储一下params备用　　store.commit (REFRESHPARAM,{关键:to.name值:to.params}) 　　next()//千万不要忘了,否则导航会被“掐死”在这儿。:d 　　})//? 　　之前　　　　

很简单吧!总共没有几行代码O (∩_∩) O ~
　　

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。