详解使用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 相关文章推荐
JavaScript 学习笔记一些小技巧
Mar 28 Javascript
jQuery ajax dataType值为text json探索分享
Sep 23 Javascript
JS实现动态给图片添加边框的方法
Apr 01 Javascript
JSON与XML的区别对比及案例应用
Nov 11 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
Jan 06 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
Feb 14 Javascript
input type=file 选择图片并且实现预览效果的实例
Oct 26 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
Apr 26 Javascript
jQuery属性选择器用法实例分析
Jun 28 jQuery
element-ui如何防止重复提交的方法步骤
Dec 09 Javascript
javascript利用canvas实现鼠标拖拽功能
Jul 23 Javascript
js 函数性能比较方法
Aug 24 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数组及条件,循环语句学习
2012/11/11 PHP
浅析php中三个等号(===)和两个等号(==)的区别
2013/08/06 PHP
PHP简单留言本功能实现代码
2017/06/09 PHP
Three.js源码阅读笔记(基础的核心Core对象)
2012/12/27 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
2013/04/08 Javascript
JQuery each()嵌套使用小结
2014/04/18 Javascript
js操作浏览器的参数方法
2017/01/21 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
2017/09/14 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
2017/10/25 Javascript
详解JavaScript添加给定的标签选项
2018/09/17 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
2019/05/10 Javascript
[42:50]NB vs VP 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
介绍Python中几个常用的类方法
2015/04/08 Python
python中requests小技巧
2017/05/10 Python
Python 网页解析HTMLParse的实例详解
2017/08/10 Python
python安装Scrapy图文教程
2017/08/14 Python
简单谈谈python中的lambda表达式
2018/01/19 Python
python实现年会抽奖程序
2019/01/22 Python
Python如何处理大数据?3个技巧效率提升攻略(推荐)
2019/04/15 Python
python多线程下信号处理程序示例
2019/05/31 Python
详解django中Template语言
2020/02/22 Python
巴西在线鞋店:Shoestock
2017/10/28 全球购物
lululemon美国官网:瑜伽服+跑步装备
2018/11/16 全球购物
美国名牌手表折扣网站:Jomashop
2020/05/22 全球购物
方法名是否可以与构造器的名字相同
2012/06/04 面试题
自我鉴定四大框架
2014/01/17 职场文书
女儿十岁生日答谢词
2014/01/27 职场文书
20年同学聚会感言
2014/02/03 职场文书
购房协议书
2014/04/11 职场文书
《月亮湾》教学反思
2014/04/14 职场文书
2014年民主评议党员个人总结
2014/09/24 职场文书
婚前协议书范本两则
2014/10/16 职场文书
物价局领导班子四风问题整改措施
2014/10/26 职场文书
平安建设汇报材料
2014/12/29 职场文书
市场部岗位职责范本
2015/04/15 职场文书
联谊会开场白
2015/06/01 职场文书