Vue3 如何实现路由守卫？

Question

Vue3 如何实现路由守卫？

仓乃文 · Accepted Answer

Vue3 路由守卫有三种：全局守卫（beforeEach）、路由独享守卫（beforeEnter）、组件内守卫（onBeforeRouteLeave）。常用于权限控制和页面跳转拦截。

全局前置守卫（所有路由切换都会触发）：
```javascript
import { createRouter, createWebHistory } from "vue-router";

const router = createRouter({
  history: createWebHistory(),
  routes: [...]
});

router.beforeEach(async (to, from) => {
  if (to.meta.requiresAuth && !isLoggedIn()) {
    return { path: "/login", query: { redirect: to.fullPath } };
  }
  return true;  // 通过
});

router.afterEach((to) => {
  document.title = to.meta.title || "默认标题";
});
```

路由独享守卫（单个路由配置）：
```javascript
const routes = [
  {
    path: "/admin",
    component: Admin,
    beforeEnter: (to, from) => checkAdminPermission()
  }
];
```

组件内守卫：
```javascript
import { onBeforeRouteLeave } from "vue-router";

onBeforeRouteLeave((to, from) => {
  const answer = window.confirm("确定要离开吗？");
  if (!answer) return false;  // 取消导航
});
```

补充说明：
- 守卫返回值：true 通过，false 取消，route 对象表示跳转
- 异步守卫需要返回 Promise 或使用 async/await
- meta 属性可以存储自定义数据，如 requiresAuth、title
- 守卫执行顺序：beforeEach -> beforeEnter -> beforeRouteEnter -> afterEach