VueRoute钩子函数
# VueRoute钩子函数
# V3.x
# 全局前置守卫router.beforeEach
可以使用
router.beforeEach
注册一个全局前置守卫:
to: Route
: 即将要进入的目标 路由对象 (opens new window)from: Route
: 当前导航正要离开的路由next: Function
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
1
2
3
4
5
2
3
4
5
# 全局解析守卫router.beforeResolve
可以用
router.beforeResolve
注册一个全局守卫。这和router.beforeEach
类似,区别是在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用。
# 全局后置钩子
可以注册全局后置钩子,然而和守卫不同的是,这些钩子不会接受
next
函数也不会改变导航本身:
router.afterEach((to, from) => {
// ...
})
1
2
3
2
3
# 路由独享的守卫
可以在路由配置上直接定义 beforeEnter 守卫:
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
注意
:这些守卫与全局前置守卫的方法参数是一样的
# 组件内的守卫
可以在路由组件内直接定义以下路由导航守卫
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`
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# V4.x
# 全局后置守卫
编辑 (opens new window)
上次更新: 2023/06/25, 09:27:47