vue 路由导航白话全解析

路由守卫

路由守卫说白了就是路由拦截，在地址栏跳转之前之后跳转的瞬间干什么事

全局守卫

全局守卫顾名思义，就是全局的，整个项目所有路由，跳转所用到的守卫（拦截），设置了全局守卫之后，只要路由（浏览器地址栏）发生变化就会触发的事件

全局守卫分为二部分前置守卫（跳转之前）后置钩子（跳转之后）

前置守卫：
router.beforeEach
这个方法有三个参数
（to, from, next）
to：即将进入的地址，比如说点击按钮从 A 跳转到 B ，那么to就是 B 的路由对象，
from：要离开的地址，比如说点击按钮从 A 跳转到 B ，那么to就是 A 的路由对象，
next：就是在跳转的时候要执行的事件，比如说点击按钮从 A 跳转到 B ，然后我在next执行了一个方法 next({ path: ‘/C’ }) 这样就会跳转到C 页面，而不是 B 页面了，这就是路由拦截了，如果这么写的话不管你愿来是想从那个页面跳转那个页面他都会给你跳转到 C 页面
在这里就可以判断，如果满足一定的条件就让他 next({ path: ‘/C’ }) 就是满足一定的条件才让他跳转到C 不满足的时候就正常跳转

这里next 还有一个作用 next(false) 这样会中断路由的跳转比如说点击按钮从 A 跳转到 B 然后我执行了 next(false) 那么浏览器就不会进行跳转从新回到A页面这样就阻止了路由的跳转在这里就可以判断，如果满足一定的条件就让他 next(false) 这样就不进行跳转了

路由独享守卫

顾名思义：就是这个守卫，只是单独的这个组件独享的，局部的，不是全局的，只有这个路由在进行跳转的时候，才会触发的，其他的组件，路由进行跳转的时候不执行这个方法

独享守卫有三个方法：
beforeRouteEnter 在渲染该组件的对应路由被 confirm 前调用就是页面跳转前要执行的方法要干的事

beforeRouteUpdate 在当前路由改变，但是该组件被复用时调用就是当页面在A 跳转到 B 的一瞬间要干的事

beforeRouteLeave 导航离开该组件的对应路由时调用就是在跳转完成之后要干的事

这三个方法都有三个参数（to, from, next）跟全局守卫的三个参数用法一样

其中 beforeRouteEnter 守卫不能访问 this 其他两个守卫可以访问到this

版权声明：本文来源博客园，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://www.cnblogs.com/hyl1991/p/10609193.html
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2019-11-17 15:23:39
阅读 ( 937 )
分类：前端

vue 路由导航白话全解析

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看