vue-router 提供了多种导航钩子(也称为导航守卫),这些钩子允许你在路由发生变化时执行一些操作,如检查用户权限、数据预加载等。以下是 vue-router 中常见的几种导航钩子及其示例:
全局前置守卫(beforeEach)
这是最常用的导航守卫之一,它在路由跳转前触发。你可以在这里执行一些诸如检查用户登录状态的操作。
javascript
router.beforeEach((to, from, next) => {
// 检查是否已登录
if (!isLoggedIn()) {
// 如果未登录,则重定向到登录页面
next('/login');
} else {
// 如果已登录,则正常跳转
next();
}
});
在这个例子中,to 是即将要进入的目标路由对象,from 是当前导航正要离开的路由对象,next 是一个函数,必须调用该方法来 resolve 这个钩子。
2. 全局后置守卫(afterEach)
这个守卫在路由跳转完成后触发,不接收 next 函数,也不会改变导航本身。
javascript
router.afterEach((to, from) => {
// 路由跳转完成后,可以在这里做一些清理工作,如关闭模态框、隐藏导航栏等
// 注意:这里没有 next 函数
});
路由独享的守卫(beforeEnter)
你可以在路由配置中直接定义 beforeEnter 守卫:
javascript
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
// ... 其他路由
]
});
这个守卫与全局前置守卫类似,但它只在当前路由中生效。
4. 组件内的守卫
beforeRouteEnter:在渲染该组件的对应路由被 confirm 前调用,即当路由导航确认前,同时在组件实例还没被创建之前调用。
beforeRouteUpdate(2.2+):在当前路由改变,但是该组件被复用时调用。
beforeRouteLeave:导航离开该组件的对应路由时调用。
例如:
javascript
export default {
data() {
return {
// ...
};
},
beforeRouteEnter(to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不!能!获取组件实例 `this`
// 因为当守卫执行前,组件实例还没被创建
},
beforeRouteUpdate(to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
},
beforeRouteLeave(to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
};