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

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

发布时间 - 2026-01-11 03:12:18 点击率：次

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

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里取。似乎没错，就是麻烦了点儿！！别慌，咱们有导航钩子 router.beforeEach((to, from, next) => { // ... }) 啊！

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

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

/*
Vuex store 定义存储对象RouterParams
*/
//...
const state = {
 //定义一个存储map，key：导航name，value：导航params
 paramMap: {}
}

const mutations = {
 REFRESHPARAM (state, 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~

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

# Vue # Router后退状态保存 # Vue后退 # 保存状态 # vue-router结合vuex实现用户权限控制功能 # vue router+vuex实现首页登录验证判断逻辑 # 基于vue # vue-router # vuex及addRoutes进行权限控制问题 # 基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果 # vue-router+vuex addRoutes实现路由动态加载及菜单动态加载 # Vue-router 类似Vuex实现组件化开发的示例 # Vuex与Vue router的使用详细讲解 # 会有 # 很简单 # 都是 # 几个 # 我就 # 是在 # 尤其是 # 上一页 # 说了 # 什么时候 # 找不到 # 不多 # 丢失了 # 说到 # 把你 # 这是一个 # 如果没有 # 此类 # 问题是 # 写了

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：网站漏洞修复之上传webshell漏洞修补的示例分析

下一篇：网站服务器无响应如何排查与解决？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：网站漏洞修复之上传webshell漏洞修补的示例分析

下一篇：网站服务器无响应如何排查与解决？