vue router导航守卫（router.beforeEach()）的使用详解
版权申诉
5星 · 超过95%的资源 25 浏览量
2020-10-17
03:12:54
上传
评论
收藏 65KB PDF 举报 
vue router导航守卫（导航守卫（router.beforeEach()）的使用详解）的使用详解
导航守卫主要用来通过跳转或取消的方式守卫导航。这篇文章主要介绍了vue-router导航守卫
（router.beforeEach()）的使用,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的
朋友可以参考下
导航守卫导航守卫
导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组
件级的。（记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察$route对象来应对这些变化，或使用
beforeRouteUpdate的组件内守卫。）
好久没写一些东西了，总是感觉有啥缺少的。~~~~恰好碰到最近在写一个移动端项目，遇到了如何使同一个链接在不同条件
下跳转到不同路由组件问题，譬如大家经常看到手机中没登录跳转登录页，登陆后跳转个人信息页等。废话不多说了，直接上
图：
这是没登录状态，点击下面mine按钮跳转至登录页
这个是我登录了自己的账号后，再次点击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) => {
// ...
})
这里对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上等你一起呦
~
说明说明
weixin_38532849
- 粉丝: 7
- 资源: 952
最新资源
- 筷手引流工具.apk
- 论文(最终)_20240430235101.pdf
- 基于python编写的Keras深度学习框架开发，利用卷积神经网络CNN,快速识别图片并进行分类
- 最全空间计量实证方法（空间杜宾模型和检验以及结果解释文档）.txt
- 5uonly.apk
- 蓝桥杯Python组的历年真题
- 2023-04-06-项目笔记 - 第一百十九阶段 - 4.4.2.117全局变量的作用域-117 -2024.04.30
- 2023-04-06-项目笔记 - 第一百十九阶段 - 4.4.2.117全局变量的作用域-117 -2024.04.30
- 前端开发技术实验报告：内含4四实验&实验报告
- Highlight Plus v20.0.1
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
- 1
- 2
- 3
前往页