Vue Router 4核心变化与导航守卫
介绍Vue Router 4（配合Vue3）相比Vue Router 3的核心变化，以及导航守卫（Navigation Guards）的执行顺序和完整解析流程。createRouter与new Router的区别是什么？
回答
孤独的心
createRouter vs new Router
Vue3使用createRouter代替new VueRouter：
// Vue Router 4
import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
history: createWebHistory(),
routes: [...]
});
app.use(router);
核心变化：
- 工厂函数：
createRouter/createWebHistory/createWebHashHistory - 不再依赖Vue构造函数：与Vue解耦
- Composition API集成：
useRouter/useRoute/onBeforeRouteLeave/onBeforeRouteUpdate - TypeScript支持：自定义RouteRecordRaw类型
- 路由Props：
{ props: true }将params作为props传给组件 - 动态路由：
router.addRoute()增强
导航守卫完整执行顺序
- 前置守卫触发：
router.beforeEach（全局） - 路由独享守卫：
beforeEnter（路由配置中的守卫） - 组件内守卫执行（旧组件）：
onBeforeRouteUpdate/beforeRouteUpdate - 组件内守卫（新组件）：
onBeforeRouteLeave/beforeRouteLeave - 解析守卫：
router.beforeResolve（全局，确认导航前） - 导航确认：更新URL
- 后置守卫：
router.afterEach（全局，无next）
完整导航解析流程：
导航被触发
↓
失活组件里调用 beforeRouteLeave 守卫
↓
调用全局 beforeEach 守卫
↓
重用的组件里调用 beforeRouteUpdate 守卫
↓
路由配置里调用 beforeEnter
↓
解析异步路由组件
↓
激活组件里调用 onBeforeRouteEnter
↓
调用全局 beforeResolve 守卫
↓
导航被确认
↓
更新 DOM
↓
调用全局 afterEach 守卫
动态路由守卫示例：
router.beforeEach(async (to, from) => {
if (to.meta.requiresAuth && !isAuthenticated()) {
return { path: '/login', query: { redirect: to.fullPath } };
}
});
注意Vue Router 4中守卫直接return路径（而非调用next()）。