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

作者:changchao 时间:2024-05-05 09:24:27 

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

1需求

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

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

导航按钮

点击返回按钮,返回上一页,并且显示上页内容。其实不止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~

来源:http://www.jianshu.com/p/ffe029dcb210

标签:Vue,后退,保存状态
0
投稿

猜你喜欢

  • Python实现按当前日期(年、月、日)创建多级目录的方法

    2022-05-01 09:22:01
  • Python配置文件管理之ini和yaml文件读取的实现

    2022-01-10 15:33:08
  • Express实现Session身份认证的示例代码

    2024-05-08 09:38:21
  • Python爬虫之urllib库详解

    2022-01-09 23:03:27
  • Laravel框架实现定时发布任务的方法

    2023-11-22 23:54:57
  • el-input无法输入的问题和表单验证失败问题解决

    2024-04-09 10:48:37
  • 安装ElasticSearch搜索工具并配置Python驱动的方法

    2021-03-12 12:07:52
  • python __init__与 __new__的区别

    2022-05-04 01:27:57
  • js实现选项卡效果

    2024-05-09 10:12:01
  • python np.arange 步长0.1的问题需要特别注意

    2021-09-26 08:49:49
  • python3下载抖音视频的完整代码

    2023-12-24 01:10:42
  • Linux下Python安装完成后使用pip命令的详细教程

    2021-07-07 02:45:51
  • python基础pandas的drop()用法示例详解

    2023-06-11 15:11:39
  • pandas中df.groupby()方法深入讲解

    2024-01-01 15:30:24
  • ubunt18.04LTS+vscode+anaconda3下的python+C++调试方法

    2023-04-01 16:46:37
  • Python+OpenCV图像处理——打印图片属性、设置存储路径、调用摄像头

    2022-10-12 22:54:02
  • PyHacker编写指南引用Nmap模块实现端口扫描器

    2023-07-15 14:15:40
  • vue3的watch用法以及和vue2中watch的区别

    2024-04-30 08:42:37
  • python的staticmethod与classmethod实现实例代码

    2022-10-02 23:56:45
  • 统计热门文章的算法

    2008-03-16 15:40:00
  • asp之家 网络编程 m.aspxhome.com