Vue.js最佳实践--VueRouter的beforeEnter与beforeRouteLeave冲突解决
用Vue做应用管理系统,通常会在离开某个页面的时候,需要检测用户是否有修改,询问用户需要不需要保存之类的需求
这时候,在读VueRouter文档:组件内的守卫 的时候,发现beforeRouteLeave,这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false)
来取消。这个不正是为我们这个需求量身定制的功能嘛!!!
Vue+VueRouter很赞,当初选他没错,哈哈哈!!!
可是在实际使用的时候发现,beforeRouteLeave这个守卫被触发了两次,为什么呢?
调查发现有的模块在跳转前,会有根据登录情况的判断进入的模块,例如配置路由时:
path: '/home',
name: 'home',
beforeEnter(routeTo, routeFrom, next) {
// If the user is already logged in
if (store.getters['auth/loggedIn']) {
next({ name: 'xx' })
} else<span> {
// Redirect to login instead
next({ name: 'login' })
}
},
beforeEnter中进行了跳转,这样路由发生了两次变化,beforeRouteLeave被触发了两次,这是不是VueRouter的bug?
解决方案呢?再读文档,重定向,并且文中特意指出,注意导航守卫并没有应用在跳转路由上,而仅仅应用在其目标上。这不正是我期待的效果嘛!
于是,修改后的代码,这样组件内的beforeRouteLeave就不会被触发两次了
path: '/home',
name: 'home',
redirect: to => {
if (store.getters['auth/loggedIn']) {
// Redirect to xx instead
return '/xx'
} else {
// Redirect to login instead
return '/login'
}
},
Vue.js最佳实践--VueRouter的beforeEnter与beforeRouteLeave冲突解决的更多相关文章
- Vue.js最佳实践
Vue.js最佳实践 第一招:化繁为简的Watchers 场景还原: created(){ this.fetchPostList() }, watch: { searchInputValue(){ t ...
- Vue.js最佳实践--给大量子孙组件传值(provide/inject)
开发中有个需求,有个Parent组件(例如div)下,输入框,下拉框,radiobutton等可编辑的子孙组件几百个,根据某个值统一控制Parent下面的所有控件的disabled状态 类似于这样,给 ...
- Vue.js最佳实践(五招让你成为Vue.js大师)
对大部分人来说,掌握Vue.js基本的几个API后就已经能够正常地开发前端网站.但如果你想更加高效地使用Vue来开发,成为Vue.js大师,那下面我要传授的这五招你一定得认真学习一下了. 第一招:化繁 ...
- Vue.js最佳实践(五招助你成为vuejs大师)
转自https://www.jb51.net/article/139448.htm 本文面向对象是有一定Vue.js编程经验的开发者.如果有人需要Vue.js入门系列的文章可以在评论区告诉我,有空就给 ...
- JavaScript best practices JS最佳实践
JavaScript best practices JS最佳实践 0 简介 最佳实践起初比较棘手,但最终会让你发现这是非常明智之举. 1.合理命名方法及变量名,简洁且可读 var someItem = ...
- require.js 最佳实践【转】
https://www.cnblogs.com/digdeep/p/4607131.html require.js是一个js库,相关的基础知识,前面转载了两篇博文:Javascript模块化编程(re ...
- require.js 最佳实践
require.js是一个js库,相关的基础知识,前面转载了两篇博文:Javascript模块化编程(require.js), Javascript模块化工具require.js教程,RequireJ ...
- vue.js 中使用(...)运算符报错的解决方法
vue.js 中使用(...)运算符报错的解决方法 Syntax Error:Unexpected token(XX:X) }, computed:{ ...mapGetters([ 'pageSiz ...
- Vue 工程化最佳实践
目录结构 总览 api 目录用于存放 api 请求,文件名与模型名称基本一致,文件名使用小驼峰,方法名称与后端 restful 控制器一致. enums 目录存放 常量,与后端的常量目录对应 ...
随机推荐
- 201871020225-牟星源《面向对象程序设计(java)》第6-7周学习总结
201871020225-牟星源<面向对象程序设计(java)>第6-7周学习总结 博文正文: 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu- ...
- VC 静态库与动态库(四)动态库创建与使用_显示调用
在第三章的基础上,接着添加一个显示调用项目 显示调用项目创建: 1.给解决方案添加一个新的控制台项目DisplayCall用于测试动态库,创建完成后设置为启动项目 2.DisplayCall.cpp添 ...
- zz——Recent Advances on Object Detection in MSRA
本文由DataFun社区根据微软亚洲研究院视觉组Lead Researcher Jifeng Dai老师在2018 AI先行者大会中分享的<Recent Advances on Object D ...
- React的一些原则
做React的一些原则, ① 我的交互,总是改变的是数据,而不是视图,视图是React来负责更新的,数据驱动开发,我永远都在改数据而不是控制视图 这个图的做法是先获取list数据,再等用户点击 查看详 ...
- UVA10559 方块消除 Blocks 题解
设g[i][j][k]为消去区间[i,j]中的方块,只留下k个与a[i]颜色相同的方块的最大价值,f[i][j]为将[i,j]中所有方块消去的价值,转移自己yy一下即可. 为什么这样是对的?因为对于一 ...
- Python正则表达式学习与运用
一.什么是正则表达式 正则表达式是对字符串(包括普通字符(例如,a 到 z 之间的字母)和特殊字符(称为“元字符”))操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个 ...
- [LeetCode] 148. Sort List 链表排序
Sort a linked list in O(n log n) time using constant space complexity. Example 1: Input: 4->2-> ...
- java8 HashTable 原理
HashTable原理 Hashtable是基于陈旧的Dictionary类的,HashMap是Java 1.2引进的Map接口的一个实现.Hashtable中的方法是同步的,而HashMap方法(在 ...
- PHP获取cookie、Token、模拟登录、抓取数据、解析生成json
本文介绍使用PHP获取cookie,获取Token.以及模拟登录.然后抓取数据.最后解析生成json的的过程. 0. 设置Cookie路径 set_time_limit(0); //使用的cookie ...
- Qt Quick 基本元素初体验
Qt Quick 作为 QML 语言的标准库,提供了很多基本元素和控件来帮助我们构建 Qt Quick 应用,这节我们简要地介绍一些 Qt Quick 元素. 一. 基本可视化项 1.1 Item I ...