详解使用Vue Router导航钩子与Vuex来实现后退状态保存

网友投稿 361 2023-04-06


详解使用Vue Router导航钩子与Vuex来实现后退状态保存

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

1需求

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

导航按钮

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

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

2 解决

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

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

什么时候存:第一反应,调用 router.push({name: 'xxx', params: {xxx:123...}})时保存,然后如果导航回到这个URL,如果没有params,尝试从vuex store里取。似乎没错,就是麻烦了点儿!!别慌ZgslKv,咱们有导航钩子 router.beforeEach((to, from, next) => { // ... }) 啊!

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

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

/*

Vuex store 定义存储对象RouterParams

*/

//...

const state = {

//定义一个存储map,key:导航name,value:导航params

paramMap: {}

}

const mutations = {

REFRESHPARAM (stateZgslKv, paramKV) {

//mutation,应该能看懂做的操作吧?

Vue.set(state.paramMap, paramKV.key, paramKV.value)

}

}

//...

/*

router中设置一个全局导航钩子

*/

const router = new VueRouter({ ... }) //router

router.beforeEach((to, from, next) => {

// 只有在找不到params时才"出此下策"

if (Object.keys(to.params).length === 0) {

// 从store中取出付给params,此处注意路径未必完全吻合,以你的为准

Object.assign(to.params, store.state.RouterParams.paramMap[to.name] || {})

}

// 存储一下params备用

store.commit('REFRESHPARAM', {key: to.name, value: to.params})

next() // 千万不要忘了,否则导航会被“掐死”在这儿。:-D

})

//...

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


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:详解关于react
下一篇:spring cloud zuul修改请求url的方法
相关文章

 发表评论

暂时没有评论,来抢沙发吧~