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 相关文章推荐
JS处理VBArray的函数使用说明
May 11 Javascript
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
Jun 21 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
Apr 26 Javascript
jQuery中:gt选择器用法实例
Dec 29 Javascript
JavaScript中的方法重载实例
Mar 16 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
May 25 Javascript
Web开发使用Angular实现用户密码强度判别的方法
Sep 27 Javascript
快速搭建React的环境步骤详解
Nov 06 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
Dec 21 Javascript
web页面和微信小程序页面实现瀑布流效果
Sep 26 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
Jun 22 Javascript
小程序实现可拖动的悬浮按钮
Sep 07 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
谈谈PHP语法(3)
2006/10/09 PHP
php网页后退不再出现过期
2007/03/08 PHP
PHP 常用数组内部函数(Array Functions)介绍
2013/06/05 PHP
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
2011/09/28 Javascript
JavaScript常用小技巧小结
2014/12/29 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
AngularJS实现标签页的两种方式
2016/09/05 Javascript
jsp 网站引入外部css或者js失效问题解决
2016/10/31 Javascript
用jQuery实现优酷首页轮播图
2017/01/09 Javascript
基于jQuery实现数字滚动效果
2017/01/16 Javascript
Vue自定义图片懒加载指令v-lazyload详解
2020/12/31 Javascript
初识 Vue.js 中的 *.Vue文件
2017/11/22 Javascript
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
javascript按顺序加载运行js方法
2017/12/01 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
2019/01/18 jQuery
nodejs微信开发之接入指南
2019/03/17 NodeJs
python实现哈希表
2014/02/07 Python
python使用tensorflow保存、加载和使用模型的方法
2018/01/31 Python
python bmp转换为jpg 并删除原图的方法
2018/10/25 Python
解决pycharm运行出错,代码正确结果不显示的问题
2018/11/30 Python
python3 pygame实现接小球游戏
2019/05/14 Python
pyinstaller打包单个exe后无法执行错误的解决方法
2019/06/21 Python
Python的log日志功能及设置方法
2019/07/11 Python
浅谈css3中的渐进增强和优雅降级
2017/12/01 HTML / CSS
加拿大消费电子和手机购物网站:The Source
2017/01/28 全球购物
英国哈罗德园艺:Harrod Horticultural
2020/03/31 全球购物
安德玛菲律宾官网:Under Armour菲律宾
2020/07/28 全球购物
名人演讲稿范文
2013/12/28 职场文书
绿色城市实施方案
2014/03/19 职场文书
夫妻忠诚协议范文
2014/11/16 职场文书
公司晚宴祝酒词
2015/08/11 职场文书
导游词之寿县报恩寺
2020/01/19 职场文书
Python还能这么玩之只用30行代码从excel提取个人值班表
2021/06/05 Python
关于CentOS 8 搭建MongoDB4.4分片集群的问题
2021/10/24 MongoDB
Python 全局空间和局部空间
2022/04/06 Python
使用JS前端技术实现静态图片局部流动效果
2022/08/05 Javascript