文章目录
- 简介
- 全局钩子
- 路由独享的钩子
- 组件内的钩子
-
- [Vue 2 (Vue Router 3) 中](#Vue 2 (Vue Router 3) 中)
- [Vue 3 (Vue Router 4)中](#Vue 3 (Vue Router 4)中)
简介
Vue Router 提供了路由钩子(Route Hooks),允许你在路由发生变化时执行一些操作。
这些钩子可以在路由进入、离开等关键时刻触发,从而实现一些特定的功能,比如页面权限控制、数据预加载等。
路由守卫简单来讲就是监听页面进入 ,修改 ,和离开的功能。
每个守卫接受三个参数:
- to:即将要进入的路由对象
- from:当前导航正要离开的路由
- next:一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
关于 next :
next()
:进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。next(false)
:中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。next('/')
或next({ path: '/' })
:跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。next(error)
:(2.4.0+) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。
.
Vue Router 的路由钩子主要分为三类:
- 全局钩子
- 路由独享的钩子
- 组件内的钩子
全局钩子
全局钩子对整个路由实例都有效,它们主要有两个:beforeEach
和 afterEach
。
-
beforeEach:在路由跳转前触发,常用于判断用户是否登录、是否有权限访问某个页面等。
-
afterEach:在路由跳转后触发,通常用于一些清理工作或者页面跳转后的通知。
js
const router = new VueRouter({ /* ... */ });
router.beforeEach((to, from, next) => {
// 逻辑判断...
next() // 确保要调用 next() 方法,否则路由不会跳转
})
router.afterEach((to, from) => {
// 路由跳转后的操作...
})
路由独享的钩子
可以在路由配置中直接定义 beforeEnter
钩子,它只会在进入该路由时触发。
js
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// 逻辑判断...
next()
}
}
]
})
组件内的钩子
在 Vue 组件中,你可以使用以下路由钩子:beforeRouteEnter
、beforeRouteUpdate
(2.2+ 新增)、beforeRouteLeave
。
-
beforeRouteEnter:在路由进入该组件的渲染函数之前调用,此时组件实例尚未创建,因此无法访问 this。可以通过 next 的回调函数来访问组件实例。
-
beforeRouteUpdate :当同一个路由重新渲染时调用,例如,对于带有动态参数的路由
/foo/:id
,当:id
发生变化时,该组件会被重新渲染。 -
beforeRouteLeave:在导航离开该组件的对应路由时调用。
Vue 2 (Vue Router 3) 中
js
export default {
data() {
return {
// ...
}
},
beforeRouteEnter(to, from, next) {
// 组件尚未创建,无法访问 `this`
next(vm => {
// 访问组件实例 `vm`
})
},
beforeRouteUpdate(to, from, next) {
// 当前路由改变,但组件复用时调用
// 例如,对于带查询参数或动态段的路由 `/foo?a=1` 或者 `/foo/1`,
// 组件实例会被复用,此时这个钩子会被调用
this.someData = 'new data'
next()
},
beforeRouteLeave(to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
const answer = window.confirm('你确定要离开吗?')
if (answer) {
next()
} else {
next(false) // 取消导航
}
}
}
Vue 3 (Vue Router 4)中
组件内钩子的使用方式在 Vue 3 中没有显著变化,但如果你使用 Composition API
,你可能会更倾向于使用 onBeforeRouteEnter
、onBeforeRouteUpdate
和 onBeforeRouteLeave
函数,这些函数可以与 setup 函数
一起使用。
js
import { onBeforeRouteEnter, onBeforeRouteUpdate, onBeforeRouteLeave } from 'vue-router';
export default {
setup() {
onBeforeRouteEnter((to, from, next) => {
next(vm => {
// 访问组件实例
});
});
onBeforeRouteUpdate((to, from, next) => {
// ...当前路由改变,但组件复用时调用
next();
});
onBeforeRouteLeave((to, from, next) => {
// ...导航离开该组件的对应路由时调用
next();
};
// ...其他 Composition API 逻辑
}
};
vue-router 3.x | vue-router 4.x |
---|---|
beforeRouteEnter | onBeforeRouteEnter |
beforeRouteUpdate | onBeforeRouteUpdate |
beforeRouteLeave | onBeforeRouteLeave |