Vue 路由钩子函数有 3 种,分别是 1、全局钩子函数,2、路由独享钩子函数,3、组件内钩子函数。这些钩子函数在路由的不同阶段触发,可以用于执行各种逻辑,如权限验证、数据获取等。
一、全局钩子函数
全局钩子函数是在路由发生变化时全局触发的钩子函数,通常用于处理一些全局性的逻辑。
-
beforeEach
- 作用:在每次路由跳转前触发。
- 使用场景:常用于权限验证、设置全局状态等。
- 代码示例:
router.beforeEach((to, from, next) => {
// 判断用户是否已登录
if (to.meta.requiresAuth && !isLoggedIn()) {
next('/login');
} else {
next();
}
});
-
beforeResolve
- 作用:在 beforeEach 和组件内守卫(如 beforeRouteEnter)之后,组件内守卫被解析之前触发。
- 使用场景:用于在导航确认前做一些准备工作,比如获取数据。
- 代码示例:
router.beforeResolve((to, from, next) => {
// 执行一些逻辑
next();
});
-
afterEach
- 作用:在每次路由跳转后触发。
- 使用场景:常用于记录页面访问日志、结束加载动画等。
- 代码示例:
router.afterEach((to, from) => {
// 记录页面访问日志
logPageView(to.path);
});
二、路由独享钩子函数
路由独享钩子函数是定义在路由配置中的钩子函数,仅对特定路由生效。
- beforeEnter
- 作用:在进入该路由之前触发。
- 使用场景:用于特定路由的权限验证、数据预加载等。
- 代码示例:
const routes = [
{
path: '/dashboard',
component: Dashboard,
beforeEnter: (to, from, next) => {
if (!isLoggedIn()) {
next('/login');
} else {
next();
}
}
}
];
三、组件内钩子函数
组件内钩子函数是在组件内部定义的钩子函数,用于处理组件特有的逻辑。
-
beforeRouteEnter
- 作用:在进入路由前触发。
- 使用场景:用于在进入组件前获取数据。
- 代码示例:
export default {
beforeRouteEnter(to, from, next) {
// 获取数据
next(vm => {
vm.fetchData();
});
},
methods: {
fetchData() {
// 获取数据逻辑
}
}
};
-
beforeRouteUpdate
- 作用:在当前路由改变,但该组件被复用时触发。
- 使用场景:用于响应参数变化。
- 代码示例:
export default {
beforeRouteUpdate(to, from, next) {
// 响应参数变化
this.fetchData();
next();
},
methods: {
fetchData() {
// 获取数据逻辑
}
}
};
-
beforeRouteLeave
- 作用:在离开当前路由时触发。
- 使用场景:用于在离开组件前保存数据或提示用户。
- 代码示例:
export default {
beforeRouteLeave(to, from, next) {
// 提示用户保存数据
if (this.hasUnsavedChanges) {
const answer = window.confirm('You have unsaved changes. Do you really want to leave?');
if (answer) {
next();
} else {
next(false);
}
} else {
next();
}
}
};
总结
Vue 路由钩子函数可以分为全局钩子函数、路由独享钩子函数和组件内钩子函数。每种钩子函数在路由生命周期的不同阶段触发,适用于不同的场景。全局钩子函数适用于处理全局性的逻辑,如权限验证、页面统计等。路由独享钩子函数适用于特定路由的逻辑,如数据预加载。组件内钩子函数则用于组件自身的逻辑控制,如数据获取、参数响应等。通过合理使用这些钩子函数,可以提高应用的可维护性和用户体验。在实际应用中,根据具体需求选择合适的钩子函数类型和触发时机,可以实现更加灵活和高效的路由管理。
相关问答FAQs:
1. beforeRouteEnter:在路由进入前被调用,可以在这个钩子函数中获取组件实例 this
,但是无法访问组件的 this.$route
和 this.$router
。
2. beforeRouteUpdate:在当前路由改变,但是该组件被复用时调用,可以在这个钩子函数中获取组件实例 this
,同时也可以访问组件的 this.$route
和 this.$router
。
3. beforeRouteLeave:在路由离开当前组件时被调用,可以在这个钩子函数中获取组件实例 this
,同时也可以访问组件的 this.$route
和 this.$router
。
这些路由钩子函数可以用来在路由跳转前后执行一些操作,比如验证用户权限、获取数据等。在这些钩子函数中,你可以执行异步操作,比如发送请求获取数据,然后根据结果决定是否允许跳转或者进行其他操作。
需要注意的是,这些钩子函数可以在路由配置中的每个组件中定义,也可以在全局的路由配置中定义。在组件内定义的钩子函数会在全局定义的钩子函数之前执行。另外,这些钩子函数可以通过返回一个 Promise 来延迟路由的进入或离开。
文章标题:vue路由钩子函数有几种 分别是什么,发布者:不及物动词,转载请注明出处:https://worktile.com/kb/p/3552141