详解使用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 相关文章推荐
js异或加解密效果代码
Jun 25 Javascript
ModelDialog JavaScript模态对话框类代码
Apr 17 Javascript
js导出格式化的excel 实例方法
Jul 17 Javascript
js实现数字递增特效【仿支付宝我的财富】
May 05 Javascript
js如何获取网页所有图片
May 12 Javascript
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
用ES6的class模仿Vue写一个双向绑定的示例代码
Apr 20 Javascript
基于vue中对鼠标划过事件的处理方式详解
Aug 22 Javascript
教你使用vue-cli快速构建的小说阅读器
May 13 Javascript
javascript实现蒙版与禁止页面滚动
Jan 11 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
JavaScript最完整的深浅拷贝实现方式详解
Feb 28 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
session 的生命周期是多长
2006/10/09 PHP
PHP Token(令牌)设计
2008/03/15 PHP
php下网站防IP攻击代码,超级实用
2010/10/24 PHP
PHP如何解决网站大流量与高并发的问题
2011/06/25 PHP
使用JSON实现数据的跨域传输的php代码
2011/12/20 PHP
判断php数组是否为索引数组的实现方法
2013/06/13 PHP
PHP中将ip地址转成十进制数的两种实用方法
2013/08/15 PHP
thinkPHP引入类的方法详解
2016/12/08 PHP
js设置cookie过期当前时间减去一秒相当于立即过期
2014/09/04 Javascript
javascript使用数组的push方法完成快速排序
2014/09/15 Javascript
修复bash漏洞的shell脚本分享
2014/12/31 Javascript
详解AngularJS Filter(过滤器)用法
2015/12/28 Javascript
实例讲解javascript注册事件处理函数
2016/01/09 Javascript
js使用i18n实现页面国际化的方法
2017/05/09 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
2019/04/04 Javascript
微信小程序如何访问公众号文章
2019/07/08 Javascript
vue使用nprogress实现进度条
2019/12/09 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
2020/07/22 Javascript
python查询sqlite数据表的方法
2015/05/08 Python
详解设计模式中的工厂方法模式在Python程序中的运用
2016/03/02 Python
Python中is与==判断的区别
2017/03/28 Python
Python常用内置模块之xml模块(详解)
2017/05/23 Python
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
2018/07/11 Python
Python日期时间Time模块实例详解
2019/04/15 Python
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
Html5与App的通讯方式详解
2019/10/24 HTML / CSS
英国在线定做百叶窗网站:Make My Blinds
2020/08/17 全球购物
extern是什么意思
2016/03/10 面试题
中职生自荐信
2013/10/13 职场文书
聚美优品恶搞广告词
2014/03/14 职场文书
细节决定成败演讲稿
2014/05/12 职场文书
党的群众路线学习笔记
2014/11/06 职场文书
西柏坡导游词
2015/02/05 职场文书
结婚老公保证书
2015/02/26 职场文书
python关于集合的知识案例详解
2021/05/30 Python