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 相关文章推荐
再谈IE中Flash控件的自动激活 ObjectWrap
Mar 09 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
Mar 28 Javascript
解析javascript系统错误:-1072896658的解决办法
Jul 08 Javascript
JavaScript中的some()方法使用详解
Jun 09 Javascript
javascript加减乘除的简单实例
Jul 12 Javascript
jquery之别踩白块游戏的简单实现
Jul 25 Javascript
详细谈谈AngularJS的子级作用域问题
Sep 05 Javascript
react系列从零开始_简单谈谈react
Jul 06 Javascript
微信小程序使用component自定义toast弹窗效果
Nov 27 Javascript
微信小程序中如何使用flyio封装网络请求
Jul 03 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
Sep 02 Javascript
vue 实现锚点功能操作
Aug 10 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判断页面是否是微信打开的示例(微信打开网页)
2014/04/25 PHP
symfony表单与页面实现技巧
2015/01/26 PHP
PHP获取IP地址所在地信息的实例(使用纯真IP数据库qqwry.dat)
2016/11/15 PHP
php的socket编程详解
2016/11/20 PHP
PHP控制反转(IOC)和依赖注入(DI)
2017/03/13 PHP
在laravel中实现事务回滚的方法
2019/10/10 PHP
jQuery 加上最后自己的验证
2009/11/04 Javascript
Jquery Change与bind事件代码
2011/09/29 Javascript
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
Vue 组件传值几种常用方法【总结】
2018/05/28 Javascript
记一次webapck4 配置文件无效的解决历程
2018/09/19 Javascript
深入理解Angularjs 脏值检测
2018/10/12 Javascript
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
微信小程序自定义tabBar在uni-app的适配详解
2019/09/30 Javascript
jQuery实现可以扩展的日历
2020/12/01 jQuery
在Python操作时间和日期之asctime()方法的使用
2015/05/22 Python
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
解决tensorflow1.x版本加载saver.restore目录报错的问题
2018/07/26 Python
对python xlrd读取datetime类型数据的方法详解
2018/12/26 Python
python仿抖音表白神器
2019/04/08 Python
python实现雪花飘落效果实例讲解
2019/06/18 Python
详解python中GPU版本的opencv常用方法介绍
2020/07/24 Python
Python加载数据的5种不同方式(收藏)
2020/11/13 Python
怀旧收藏品和经典纪念品:Betty’s Attic
2018/08/29 全球购物
iPad和Surface Pro蓝牙键盘:Brydge
2018/11/10 全球购物
土木工程实习生自我鉴定
2013/09/19 职场文书
竞聘演讲稿范文
2014/01/12 职场文书
网上卖盒饭创业计划书
2014/01/26 职场文书
平安校园建设方案
2014/05/02 职场文书
青年教师师德演讲稿
2014/08/26 职场文书
2014党委书记四风问题对照检查材料思想汇报
2014/09/22 职场文书
预备党员转正意见
2015/06/01 职场文书
百万英镑观后感
2015/06/09 职场文书
pytorch MSELoss计算平均的实现方法
2021/05/12 Python
Python语言中的数据类型-序列
2022/02/24 Python