vue router导航守卫(router.beforeEach())的使用详解


Posted in Javascript onApril 19, 2019

导航守卫

        导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。(记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察$route对象来应对这些变化,或使用beforeRouteUpdate的组件内守卫。)

好久没写一些东西了,总是感觉有啥缺少的。~~~~恰好碰到最近在写一个移动端项目,遇到了如何使同一个链接在不同条件下跳转到不同路由组件问题,譬如大家经常看到手机中没登录跳转登录页,登陆后跳转个人信息页等。废话不多说了,直接上图:

vue router导航守卫(router.beforeEach())的使用详解

这是没登录状态,点击下面mine按钮跳转至登录页

vue router导航守卫(router.beforeEach())的使用详解

这个是我登录了自己的账号后,再次点击mine按钮会跳转至个人信息页面

好了,看到了这个效果今天咱们来实现下

实现方法

我们点击下面mine按钮其实是路由跳转,所以我们需要在跳转路由之前做一个判断,根据不同的条件让这个链接跳转到不同路由。这时候我们vue-router中的导航守卫就闪亮登场了~~~

先看官方文档: https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。

官方文档中说了很清楚,我们可以使用 router.beforeEach 注册一个全局前置守卫:

在router文件夹下index.js中添加以下代码

router.beforeEach((to, from, next) => {
 // ...
})

vue router导航守卫(router.beforeEach())的使用详解

这里对router.beforeEach方法的每个参数做简要的解释。

“to”: 即将要进入的目标 路由对象;(这个对象中包含name,params,meta等属性)

"from": 当前导航正要离开的路由对象;(这个对象中包含name,params,meta等属性)

“next”: Function: 确保要调用 next 方法,否则钩子就不会被 resolved。这个当中还可以传一些参数,具体可以看官方文档。

我们在代码中做了一个判断 if (to.name === 'Mine') ,也就是说当我们要跳转的路由对象是Mine时候,才会进入导航守卫中判断条件,当我们点击其他链接跳转其他页正常,因为我们只有mine按钮链接对应的情况有两种。

// 登陆/注册就去用户详情页
 if (localStorage.getItem('userID')) {
  router.replace('/myinfo')
 }

这段代码就是判断当用户点击了mine,我们需要判断用户是否是登录还是未登录了。因为之前用户登录的时候我将用户的userID保存到了localStorage中,所以只需要判断localStorage中是否有用户的userID,来判断用户是否登录。这里情况两个,未登录去登录页,登录去个人信息页

好了,通过简单的配置使用,我们就可以愉快的根据不同的情况来实现路由跳转不同组件了~

哈哈,很简单吧,欢迎大家一起交流学习前端知识。我在GitHub上等你一起呦
~

说明

文章因为是在工作之余写的,可能时间匆忙,有些错别字或者语法等低级错误,欢迎留言指出,谢谢。。

同时在GitHub上也可以一起交流交流~~~

GitHub 走你

总结

以上所述是小编给大家介绍的vue router导航守卫(router.beforeEach())的使用详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
Apr 17 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
Dec 11 Javascript
15个jquery常用方法、小技巧分享
Jan 13 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
Dec 18 Javascript
详解AngularJS Filter(过滤器)用法
Dec 28 Javascript
js正则表达式验证表单【完整版】
Mar 06 Javascript
微信小程序 动态绑定事件并实现事件修改样式
Apr 13 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
Jan 09 Javascript
vue.js父子组件通信动态绑定的实例
Sep 28 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
LayUI动态设置checkbox不显示的解决方法
Sep 02 Javascript
this.$toast() 了解一下?
Apr 18 #Javascript
Vue-input框checkbox强制刷新问题
Apr 18 #Javascript
vue axios封装及API统一管理的方法
Apr 18 #Javascript
Vue组件系列开发之模态框
Apr 18 #Javascript
详解vue的数据劫持以及操作数组的坑
Apr 18 #Javascript
微信小程序 setData 对 data数据影响问题
Apr 18 #Javascript
详解JavaScript中关于this指向的4种情况
Apr 18 #Javascript
You might like
Cappuccino 卡布其诺咖啡之制作
2021/03/03 冲泡冲煮
PHP学习笔记之三 数据库基本操作
2011/01/17 PHP
探讨:如何编写PHP扩展
2013/06/13 PHP
ThinkPHP实例化模型的四种方法概述
2014/08/22 PHP
ThinkPHP连接Oracle数据库
2016/04/22 PHP
PHP操作mysql数据库分表的方法
2016/06/09 PHP
详解PHP中的外观模式facade pattern
2018/02/05 PHP
基于jQuery的可以控制左右滚动及自动滚动效果的代码
2010/07/25 Javascript
用javascript添加控件自定义属性解析
2013/11/25 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
2014/04/25 Javascript
JavaScript检查某个function是否是原生代码的方法
2014/08/20 Javascript
jQuery中change事件用法实例
2014/12/26 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
JS实现的简单分页功能示例
2018/08/23 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
2018/10/31 Javascript
vue-router懒加载速度缓慢问题及解决方法
2018/11/25 Javascript
JS回调函数 callback的理解与使用案例分析
2019/09/09 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
2020/03/23 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
2020/10/29 Javascript
python爬虫把url链接编码成gbk2312格式过程解析
2020/06/08 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
Python实现列表索引批量删除的5种方法
2020/11/16 Python
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
2010/07/20 HTML / CSS
里程积分管理买卖交换平台:Points.com
2017/01/13 全球购物
Jacques Lemans德国:奥地利钟表品牌
2019/12/26 全球购物
C有"按引用传递"吗
2016/09/06 面试题
电话销售经理岗位职责
2013/12/07 职场文书
图书室管理制度
2014/01/19 职场文书
小学语文教学反思
2014/02/10 职场文书
解除劳动合同协议书
2014/04/14 职场文书
2014年乡镇妇联工作总结
2014/12/02 职场文书
2014年生活老师工作总结
2014/12/23 职场文书
Java常用函数式接口总结
2021/06/29 Java/Android
springboot中rabbitmq实现消息可靠性机制详解
2021/09/25 Java/Android
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS
mysql创建存储过程及函数详解
2021/12/04 MySQL