vue 路由守卫
- vue 路由守卫
- 全局前置守卫
- 全局解析守卫
- 全局后置钩子
- 组件内的守卫
vue 路由守卫
Vue 路由守卫是用于在导航过程中对路由 进行拦截和控制 的一种机制。
通过使用路由守卫，我们可以在路由切换前、切换后或者在加载组件前进行一些操作，比如鉴权、权限控制、页面跳转等。
在 Vue 中，路由守卫主要包括全局前置守卫、全局解析守卫、全局后置钩子和组件内的守卫。
-
全局前置守卫：通过调用
router.beforeEach方法注册全局前置守卫函数，在路由切换前执行。可以用来进行登录验证或者其他的全局拦截操作。 -
全局解析守卫：通过调用
router.beforeResolve方法注册全局解析守卫函数，与全局前置守卫类似，不同之处在于它在全局前置守卫执行完毕后被调用。 -
全局后置钩子：通过调用
router.afterEach方法注册全局后置钩子函数，在路由切换后执行。可以用来进行统计、日志记录等操作。 -
组件内的守卫：在路由配置中，可以为每个路由对象添加
beforeEnter、beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave属性，分别表示路由进入前、组件复用时、路由更新前和路由离开时的守卫。
这些路由守卫可以通过调用 next() 方法来控制路由的行为，比如允许继续执行路由切换，或者取消路由切换并重定向到其他页面。
总而言之，Vue 路由守卫提供了一种灵活的方式来控制和管理路由的行为，使得我们可以在路由导航过程中实现各种特定的操作。
更多详细内容，请微信搜索“前端爱好者“， 戳我 查看 。
全局前置守卫
router.beforeEach((to, from, next) => {
// 在路由切换前执行的逻辑
// 可以进行登录验证、权限控制等操作
// 如果用户已登录，允许继续执行路由切换
if (isLoggedIn()) {
next();
} else {
// 如果用户未登录，重定向到登录页
next('/login');
}
});
通过调用 beforeEach 方法注册了一个全局前置守卫函数。在路由切换前，会先执行这个函数。
在函数内部，我们可以编写各种逻辑来判断是否允许路由切换，比如判断用户是否已登录，若未登录则重定向到登录页。
全局解析守卫
Vue 全局解析守卫（global resolve guard）是 Vue 路由提供的一种机制，用于在全局范围内对路由进行解析处理。
全局解析守卫函数会在全局前置守卫函数执行完毕后被调用，用于处理异步路由组件的解析。
下面是使用全局解析守卫的示例代码：
router.beforeResolve((to, from, next) => {
// 在全局前置守卫执行完毕后执行的逻辑
// 可以处理一些异步路由组件的解析
if (/* 需要进行异步组件解析的条件 */) {
// 进行异步组件解析
// 例如通过动态 import() 导入异步组件
import('./components/AsyncComponent.vue')
.then(component => {
// 解析成功后，将组件添加到路由对象中
to.meta.component = component;
next();
})
.catch(error => {
// 解析失败时的处理逻辑
console.error('Failed to resolve async component:', error);
next(false); // 取消路由切换
});
} else {
next();
}
});
上述示例代码中，我们使用 beforeResolve 方法注册了一个全局解析守卫函数。在该函数内部，我们可以根据需要进行一些异步组件的解析操作。例如，通过动态 import() 导入异步组件，并在解析成功后将其添加到目标路由对象的 meta 字段中。
需要注意的是，全局解析守卫函数在全局前置守卫函数执行完毕后被调用，因此可以确保异步组件的解析在路由切换之前完成。
同时，通过调用 next() 方法来允许继续路由切换，或者通过 next(false) 方法来取消路由切换。
通过以上示例，你可以根据具体的业务需求使用全局解析守卫来实现异步组件的解析和其他相关操作，以提供更好的用户体验和性能优化。
全局后置钩子
全局后置钩子（global after hook）是 Vue 路由提供的一种机制，用于在路由切换完成后执行一些逻辑。
全局后置钩子函数会在 所有组件 的 beforeRouteUpdate 路由守卫和被激活组件的 beforeRouteEnter 路由守卫都被调用后被触发。
下面是使用全局后置钩子的示例代码：
router.afterEach((to, from) => {
// 在路由切换完成后执行的逻辑
// 可以进行一些收尾工作或者埋点操作
// 打印路由信息
console.log(`Navigated from ${from.path} to ${to.path}`);
});
上述示例代码中，我们使用 afterEach 方法注册了一个全局后置钩子函数。在该函数内部，我们可以编写一些逻辑来进行一些收尾工作或者埋点操作。例如，在路由切换完成后打印当前的路由信息。
需要注意的是，全局后置钩子函数会在所有组件的 beforeRouteUpdate 路由守卫和被激活组件的 beforeRouteEnter 路由守卫都被调用完毕后被触发。
因此，可以在全局后置钩子内部执行与路由切换相关的一些操作，如 记录日志、发送统计数据等。
你可以根据具体的业务需求使用全局后置钩子来实现一些与路由切换完成后相关的逻辑处理。这些处理可以用于收尾工作，或者在路由切换完成后触发统计、埋点等操作。
组件内的守卫
const router = new VueRouter({
routes: [
{
path: '/profile',
component: Profile,
beforeEnter: (to, from, next) => {
// 在路由进入前执行的逻辑
// 可以根据需要进行一些操作
if (isAuthorized()) {
next(); // 允许路由进入
} else {
next('/login'); // 重定向到登录页
}
}
}
]
});
上述代码中，我们在路由配置的某个具体路由对象上添加了 beforeEnter 属性，它是一个路由组件内的守卫函数。
在该函数内部，我们可以编写一些逻辑来进行权限控制或其他需要的操作，如验证用户权限，决定是否允许进入路由。