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实现在页面上弹出蒙板技巧简单实用
Apr 16 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
Dec 04 Javascript
基于jquery实现等比缩放图片
Dec 03 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
Dec 10 Javascript
纯JS代码实现隔行变色鼠标移入高亮
Nov 23 Javascript
Node.js中sequelize时区的配置方法
Dec 10 Javascript
使用webpack搭建react开发环境的方法
May 15 Javascript
关于js陀螺仪的理解分析
Apr 11 Javascript
在Layui中实现开关按钮的效果实例
Sep 29 Javascript
Node.js控制台彩色输出的方法与原理实例详解
Dec 01 Javascript
js实现的订阅发布者模式简单示例
Mar 14 Javascript
JavaScript代码实现简单计算器
Dec 27 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
Extended CHM PHP 语法手册之 DIY
2006/10/09 PHP
一个取得文件扩展名的函数
2006/10/09 PHP
php魔术变量用法实例详解
2014/11/13 PHP
Display SQL Server Version Information
2007/06/21 Javascript
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
JavaScript 高效运行代码分析
2010/03/18 Javascript
JS 实现Json查询的方法实例
2013/04/12 Javascript
jquery实现html页面 div 假分页有原理有代码
2014/09/06 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
详解如何在vue-cli中使用vuex
2018/08/07 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
2020/06/01 Javascript
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python 面向对象 成员的访问约束
2008/12/23 Python
python实现跨文件全局变量的方法
2014/07/07 Python
Java Web开发过程中登陆模块的验证码的实现方式总结
2016/05/25 Python
python实现爬山算法的思路详解
2019/04/09 Python
Python基于BeautifulSoup和requests实现的爬虫功能示例
2019/08/02 Python
python实现复制大量文件功能
2019/08/31 Python
Python使用matplotlib实现交换式图形显示功能示例
2019/09/06 Python
pandas 空数据处理方法详解
2019/11/02 Python
python多项式拟合之np.polyfit 和 np.polyld详解
2020/02/18 Python
python模拟哔哩哔哩滑块登入验证的实现
2020/04/24 Python
Django通过设置CORS解决跨域问题
2020/11/26 Python
HTML5地理定位与第三方工具百度地图的应用
2016/11/17 HTML / CSS
HTML5中5个简单实用的API
2014/04/28 HTML / CSS
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
2015/04/24 HTML / CSS
整理HTML5移动端开发的常用触摸事件
2016/04/15 HTML / CSS
Lacoste(法国鳄鱼)加拿大官网:以标志性的POLO衫而闻名
2019/05/15 全球购物
八一慰问活动方案
2014/02/07 职场文书
设计师求职信模板
2014/05/06 职场文书
第二批党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
中班上学期个人总结
2015/02/12 职场文书
优秀员工自荐书
2015/03/06 职场文书
五年级作文之学校的四季
2019/12/05 职场文书
pytorch查看网络参数显存占用量等操作
2021/05/12 Python