Vue-Router的项目中,当路由发生跳转的时候,会触发一系列的钩子函数( 这些钩子函数就是路由守卫的钩子函数 )。
记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route
对象来应对这些变化,或使用 beforeRouteUpdate
的组件内守卫。
- 全局前置守卫 router.beforeEach
- 全局解析守卫 router.beforeResolve (2.5.0新增)
这和 router.beforeEach
类似,区别是在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用。
- 全局后置守卫 router.afterEach
这个守卫不会接收 next 函数,也不会改变导航本身
- 路由独享的守卫 beforeEnter 是路由规则配置的一个选项
- 组件内的守卫 是组件的选项配置
- beforeRouteEnter
- beforeRouteUpdate (2.2新增)
- beforeRouteLeave
const Foo = { template: `...`, beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不!能!获取组件实例 `this` // 因为当守卫执行前,组件实例还没被创建 }, beforeRouteUpdate (to, from, next) { // 在当前路由改变,但是该组件被复用时调用 // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候, // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 // 可以访问组件实例 `this` }, beforeRouteLeave (to, from, next) { // 导航离开该组件的对应路由时调用 // 可以访问组件实例 `this` }}
每个守卫方法接收3个参数:
- to 即将要进入的路由对象
- from 当前导航要离开的路由
- next 一定要调用这个方法来 resolve 这个钩子, 执行效果依赖 next 传的参数
next的使用:
- next() 去下一步
- next(false) || 不写 next() 阻止跳转
- next('/home') 主动帮你跳转到 /home 路由上
-next({
path: '',
query: {...},
name: '',
params: {...}
})
评论
60电影天堂
回复感谢分享