详解使用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 相关文章推荐
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
Apr 12 Javascript
javascript针对DOM的应用分析(三)
Apr 15 Javascript
YUI Compressor压缩JavaScript原理及微优化
Jan 07 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
Jun 23 Javascript
使用js画图之圆、弧、扇形
Jan 12 Javascript
chrome调试javascript详解
Oct 21 Javascript
jQuery实现验证年龄简单思路
Feb 24 Javascript
JavaScript之RegExp_动力节点Java学院整理
Jun 29 Javascript
详解webpack提取第三方库的正确姿势
Dec 22 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
Jul 15 Javascript
webstorm+vue初始化项目的方法
Oct 18 Javascript
JavaScript编码小技巧分享
Sep 17 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
PHP教程之PHP中shell脚本的使用方法分享
2012/02/23 PHP
php变量范围介绍
2012/10/15 PHP
php命令行用法入门实例教程
2014/10/27 PHP
PHP6连接SQLServer2005的三部曲
2016/04/15 PHP
PHP分页初探 一个最简单的PHP分页代码的简单实现
2016/06/21 PHP
javascript getElementsByName()的用法说明
2009/07/31 Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
2012/06/20 Javascript
设置checkbox为只读(readOnly)的两种方式
2013/10/11 Javascript
jquery实现弹出窗口效果的实例代码
2013/11/28 Javascript
巧用数组制作图片切换js代码
2016/11/29 Javascript
微信小程序 template模板详解及实例代码
2017/03/09 Javascript
深入理解vue2.0路由如何配置问题
2017/07/18 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
2017/07/24 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
2017/09/26 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
Vue组件之单向数据流的解决方法
2018/11/10 Javascript
vue-router两种模式区别及使用注意事项详解
2019/08/01 Javascript
javascript合并两个数组最简单的实现方法
2019/09/14 Javascript
Python中的True,False条件判断实例分析
2015/01/12 Python
编写Python脚本来实现最简单的FTP下载的教程
2015/05/04 Python
Python实现读写INI配置文件的方法示例
2018/06/09 Python
pandas通过索引进行排序的示例
2018/11/16 Python
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
PyQt5 对图片进行缩放的实例
2019/06/18 Python
Python定时发送天气预报邮件代码实例
2019/09/09 Python
python实现一次性封装多条sql语句(begin end)
2020/06/06 Python
Prometheus开发中间件Exporter过程详解
2020/11/30 Python
python爬虫scrapy框架的梨视频案例解析
2021/02/20 Python
简单总结CSS3中视窗单位Viewport的常见用法
2016/02/04 HTML / CSS
澳大利亚领先的睡衣品牌:Peter Alexander
2016/08/16 全球购物
夏威夷灵感服装及配饰:Reyn Spooner
2018/09/18 全球购物
《我要的是葫芦》教学反思
2014/02/23 职场文书
租房合同协议书
2014/04/09 职场文书
学习作风建设心得体会
2014/10/22 职场文书
创业计划书之烤红薯
2019/09/26 职场文书
Python面试不修改数组找出重复的数字
2022/05/20 Python