《Vue3 从入门到大神17篇》Vue Router 4.x 实战 —— 路由配置与导航守卫

前言在 Vue3 中如果说组件是砖瓦那么Vue Router 就是整栋建筑的骨架。没有路由就没有单页应用SPA。没有合理的路由设计项目就会变成页面堆砌。Vue Router 4.x 是专为 Vue3 打造的路由库带来了不少变化✅ 创建方式改为createRouter✅ History 模式独立为函数✅ 导航守卫 API 更加一致✅ 与 Composition API 深度集成这一篇我们从安装 → 配置 → 守卫 → 动态路由 → 懒加载一步步搭建一个企业级路由系统。一、安装与基础配置1️⃣ 安装pnpm add vue-router4⚠️注意Vue Router 4.x 只支持 Vue3不要用错版本。2️⃣ 创建路由实例// router/index.ts import { createRouter, createWebHistory } from vue-router const routes [ { path: /, name: Home, component: () import(/views/Home.vue) }, { path: /about, name: About, component: () import(/views/About.vue) } ] const router createRouter({ history: createWebHistory(), routes }) export default router3️⃣ 在 main.ts 中注册import { createApp } from vue import App from ./App.vue import router from ./router createApp(App) .use(router) .mount(#app)4️⃣ 在 App.vue 中添加路由出口template nav router-link to/首页/router-link router-link to/about关于/router-link /nav router-view / /template✅router-view是路由组件的渲染出口二、路由模式Hash vs History模式APIURL 表现服务器要求HashcreateWebHashHistory()/#/path无HistorycreateWebHistory()/path✅ 需要配置 fallback生产环境推荐 History 模式URL 更干净。三、路由配置核心概念1️⃣ 动态路由匹配{ path: /user/:id, name: User, component: () import(/views/User.vue) }组件中取值// User.vue import { useRoute } from vue-router const route useRoute() console.log(route.params.id)2️⃣ 嵌套路由{ path: /dashboard, component: () import(/layouts/DashboardLayout.vue), children: [ { path: profile, component: () import(/views/dashboard/Profile.vue) }, { path: settings, component: () import(/views/dashboard/Settings.vue) } ] }子路由渲染在父组件的router-view中3️⃣ 路由重定向{ path: /, redirect: /home }4️⃣ 路由别名{ path: /home, alias: /index, component: () import(/views/Home.vue) }四、编程式导航1️⃣ 使用useRouterimport { useRouter } from vue-router const router useRouter() const goToUser () { router.push(/user/123) }2️⃣ 带参数的跳转router.push({ name: User, params: { id: 123 } })3️⃣ 替换当前记录无历史router.replace(/login)4️⃣ 前进 / 后退router.go(-1) // 后退 router.go(1) // 前进五、导航守卫重点1️⃣ 全局前置守卫router.beforeEach((to, from, next) { // 判断是否登录 const token localStorage.getItem(token) if (to.meta.requiresAuth !token) { return next(/login) } next() })Vue Router 4 中next是可选的可以直接 returnrouter.beforeEach((to) { if (to.meta.requiresAuth !localStorage.getItem(token)) { return /login } })2️⃣ 全局后置钩子router.afterEach((to) { document.title to.meta.title as string || Vue3 App })3️⃣ 路由独享守卫{ path: /admin, component: () import(/views/Admin.vue), beforeEnter: (to, from) { return localStorage.getItem(role) admin } }4️⃣ 组件内守卫import { onBeforeRouteLeave } from vue-router onBeforeRouteLeave((to, from) { if (confirm(你有未保存的更改确定离开吗)) { return true } return false })六、路由元信息meta{ path: /dashboard, meta: { requiresAuth: true, title: 仪表盘, roles: [admin, editor] } }守卫中读取router.beforeEach((to) { if (to.meta.requiresAuth) { // 鉴权逻辑 } })七、路由懒加载性能优化1️⃣ 基础懒加载component: () import(/views/Home.vue)2️⃣ 分组懒加载Webpack/Vitecomponent: () import(/* webpackChunkName: user */ /views/User.vue)同一组的组件会打包到同一个 chunk八、动态路由添加权限路由// 根据用户权限动态添加路由 const routes getRoutesByRole(userRole) routes.forEach(route { router.addRoute(route) })这是后台管理系统权限控制的核心方案九、路由常见误区❌ 误区 1在 setup 外使用 useRoute / useRouterconst route useRoute() // ❌ 必须在 setup 中调用❌ 误区 2params 和 query 混用router.push({ path: /user, params: { id: 1 } }) // ❌ params 会被忽略✅ 正确router.push({ name: User, params: { id: 1 } })十、面试高频问答Q1Vue Router 4 和 3 的主要区别创建方式改为createRouterHistory 模式独立为函数守卫 API 更一致。Q2路由守卫的执行顺序全局前置 → 路由独享 → 组件内 beforeRouteEnter → 全局解析 → 全局后置Q3动态路由和嵌套路由的区别动态路由是路径参数匹配嵌套路由是组件层级关系。十一、总结架构级Vue Router 4 是 Vue3 的官方路由方案createRoutercreateWebHistory是标准配置导航守卫是权限控制的核心路由懒加载是性能优化的必选项动态路由是后台系统的标配 下期预告第 18 篇路由进阶 —— 懒加载、滚动行为与动态权限路由