详解使用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引用对象的方法代码
Aug 13 Javascript
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
Aug 31 Javascript
js 浮动层菜单收藏
Jan 16 Javascript
jquery 的 $("#id").html() 无内容的解决方法
Jun 07 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
Feb 26 Javascript
javascript常用的正则表达式实例
May 15 Javascript
JavaScript判断变量是对象还是数组的方法
Aug 28 Javascript
60个很实用的jQuery代码开发技巧收集
Dec 15 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
Feb 27 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
Aug 25 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
Feb 20 Javascript
js实现飞机大战游戏
Aug 26 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查询域名状态whois的类
2006/11/25 PHP
php获取301跳转URL简单实例
2013/12/16 PHP
php使用SAE原生Mail类实现各种类型邮件发送的方法
2016/10/10 PHP
如何使用php等比例缩放图片
2016/10/12 PHP
js 匿名调用实现代码
2009/06/19 Javascript
javascript eval(func())使用示例
2013/12/05 Javascript
Javascript改变CSS样式(局部和全局)
2013/12/18 Javascript
JavaScript中的类数组对象介绍
2014/12/30 Javascript
JavaScript获取页面上被选中文字的方法技巧
2015/03/13 Javascript
一个简单的JavaScript Map实例(分享)
2016/08/03 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
2016/12/21 Javascript
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
jquery.pagination.js分页使用教程
2018/10/23 jQuery
vue-cli中安装方法(图文详细步骤)
2018/12/12 Javascript
微信小程序工具函数封装
2019/10/28 Javascript
基于ajax实现上传图片代码示例解析
2020/12/03 Javascript
[05:37]DOTA2-DPC中国联赛 正赛 Elephant vs iG 选手采访
2021/03/11 DOTA
Python显示进度条的方法
2014/09/20 Python
python使用PythonMagick将jpg图片转换成ico图片的方法
2015/03/26 Python
Windows系统下多版本pip的共存问题详解
2017/10/10 Python
windows下添加Python环境变量的方法汇总
2018/05/14 Python
解决Python3中的中文字符编码的问题
2018/07/18 Python
python替换字符串中的子串图文步骤
2019/06/19 Python
Eclipse配置python默认头过程图解
2020/04/26 Python
pandas参数设置的实用小技巧
2020/08/23 Python
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
2020/05/28 HTML / CSS
沙龙级头发造型工具:FOXYBAE
2018/07/01 全球购物
Sunglasses Shop英国:欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
营销与策划个人求职信
2013/09/22 职场文书
高一生物教学反思
2014/01/17 职场文书
2014年国培研修感言
2014/03/09 职场文书
岗位廉洁从业承诺书
2014/03/28 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
幼儿园小班班务总结
2015/08/03 职场文书
Dubbo+zookeeper搭配分布式服务的过程详解
2022/04/03 Java/Android
Spring Boot配合PageHelper优化大表查询数据分页
2022/04/20 Java/Android