vue3使用路由守卫
时间: 2023-09-01 20:12:36 浏览: 56
Vue 3 中可以使用路由守卫对路由进行控制和管理。路由守卫是一些在路由切换前、切换后或者导航被确认之前触发的函数。下面我将介绍一些常用的路由守卫:
1. 全局前置守卫:使用 `router.beforeEach` 来注册一个全局前置守卫,该守卫会在路由切换前被调用。可以在该守卫中进行权限验证、登录检查等操作。
```javascript
import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
history: createWebHistory(),
routes: [...]
});
router.beforeEach((to, from, next) => {
// 进行权限验证或者登录检查
if (to.meta.requiresAuth && !isLoggedIn()) {
next('/login');
} else {
next();
}
});
```
2. 路由独享的守卫:可以在定义路由时通过 `beforeEnter` 来注册一个独享的守卫,只对当前路由起作用。
```javascript
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/admin',
component: Admin,
beforeEnter: (to, from, next) => {
// 验证管理员权限
if (isAdmin()) {
next();
} else {
next('/403');
}
}
},
...
]
});
```
3. 组件内的守卫:在组件内部可以使用 `beforeRouteEnter`、`beforeRouteUpdate` 和 `beforeRouteLeave` 这三个生命周期函数来定义组件内部的守卫。
```javascript
export default {
beforeRouteEnter(to, from, next) {
// 在进入路由前被调用
// 可以在此获取组件实例 `this`
next();
},
beforeRouteUpdate(to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 可以访问组件实例 `this`
next();
},
beforeRouteLeave(to, from, next) {
// 在离开当前路由时调用
// 可以访问组件实例 `this`
next();
}
};
```
这些是一些常见的路由守卫的使用方法,你可以根据具体需求进行配置和使用。希望能对你有所帮助!如果有更多问题,请继续提问。