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


Posted in Javascript onSeptember 11, 2017

不好意思,标题比较??拢?蛭?獯蔚牧魉?巳肥凳粲谝桓霰冉舷附诘男《?鳎?旅嫦晗附玻?/p>

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~

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

Javascript 相关文章推荐
ExtJS 2.0实用简明教程 之获得ExtJS
Apr 29 Javascript
跨浏览器开发经验总结(四) 怎么写入剪贴板
May 13 Javascript
location.search在客户端获取Url参数的方法
Jun 08 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
Sep 21 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
Mar 26 Javascript
JavaScript实现图片懒加载(Lazyload)
Nov 28 Javascript
Vuex和前端缓存的整合策略详解
May 09 Javascript
微信小程序 循环及嵌套循环的使用总结
Sep 26 Javascript
利用vue开发一个所谓的数独方法实例
Dec 21 Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
Jun 01 Javascript
Vue学习之axios的使用方法实例分析
Jan 06 Javascript
React 并发功能体验(前端的并发模式)
Jul 01 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 #jQuery
详解webpack2+React 实例demo
Sep 11 #Javascript
react-native 完整实现登录功能的示例代码
Sep 11 #Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
Sep 11 #Javascript
Vuejs 页面的区域化与组件封装的实现
Sep 11 #Javascript
js封装成插件的步骤方法
Sep 11 #Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
Sep 11 #Javascript
You might like
thinkphp3.2.3 分页代码分享
2016/07/28 PHP
PHP 匿名函数与注意事项详细介绍
2016/11/26 PHP
php实现文件预览功能
2017/05/23 PHP
基于Jquery与WebMethod投票功能实现代码
2011/01/19 Javascript
jqGrid jQuery 表格插件测试代码
2011/08/23 Javascript
从数据库读取数据后将其输出成html标签的三种方法
2014/10/13 Javascript
jQuery网页选项卡插件rTabs用法实例分析
2015/08/26 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
2015/09/24 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
2016/01/26 Javascript
有关jquery与DOM节点操作方法和属性记录
2016/04/15 Javascript
值得分享的Bootstrap Table使用教程
2016/11/23 Javascript
jQuery实现按比例缩放图片的方法
2017/04/29 jQuery
微信小程序 Buffer缓冲区的详解
2017/07/06 Javascript
浅谈angularJS的$watch失效问题的解决方案
2017/08/11 Javascript
JavaScript中Array方法你该知道的正确打开方法
2018/09/11 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
2019/03/29 Javascript
Vue 用Vant实现时间选择器的示例代码
2019/10/25 Javascript
使用JavaScript实现贪吃蛇游戏
2020/09/29 Javascript
从源码角度来回答keep-alive组件的缓存原理
2021/01/18 Javascript
在Python中操作时间之mktime()方法的使用教程
2015/05/22 Python
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
12步入门Python中的decorator装饰器使用方法
2016/06/20 Python
Python 统计字数的思路详解
2018/05/08 Python
python matplotlib实现双Y轴的实例
2019/02/12 Python
python中的逆序遍历实例
2019/12/25 Python
Python 随机生成测试数据的模块:faker基本使用方法详解
2020/04/09 Python
python 删除excel表格重复行,数据预处理操作
2020/07/06 Python
党员干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
企业三严三实学习心得体会
2014/10/13 职场文书
建筑工地资料员岗位职责
2015/04/13 职场文书
2015年扫黄打非工作总结
2015/05/13 职场文书
同意报考证明
2015/06/17 职场文书
高中政治教学反思
2016/02/23 职场文书
CocosCreator如何实现划过的位置显示纹理
2021/04/14 Javascript
宝塔更新Python及Flask项目的部署
2022/04/11 Python