Vue Router 入门精讲关键点、易错点与高频考点结合您有JS/TS基础和Vue组件通信基础本指南将直接切入Vue Router的核心提炼工作中最实用的内容避开新手陷阱。一、核心概念与安装配置Vue Router是Vue.js官方的路由管理器用于构建单页面应用(SPA)实现不刷新页面的视图切换。1. 版本匹配与安装这是第一个易错点Vue版本必须与Router版本对应。# Vue 3 项目应安装 vue-router 4.x npm install vue-router4 # Vue 2 项目应安装 vue-router 3.x npm install vue-router3错误匹配会导致兼容性问题是面试常问的点。2. 路由模式 (History Mode)创建路由实例时history模式的选择直接影响URL表现形式和部署配置。模式API (Vue Router 4)对应Vue2模式特点与注意事项HTML5 History 模式createWebHistory()mode: historyURL美观无#但部署需服务器额外配置否则刷新会404。生产环境必备知识点。Hash 模式createWebHashHistory()mode: hashURL带#无需服务器配置兼容性好。常用于简单或静态托管项目。Memory 模式createMemoryHistory()mode: abstract无URL变化用于SSR或非浏览器环境如Electron、App。基础配置示例 (TypeScript)// src/router/index.ts import { createRouter, createWebHistory, RouteRecordRaw } from vue-router // 1. 定义路由表类型为 RouteRecordRaw 数组这是TS项目的良好实践 const routes: ArrayRouteRecordRaw [ { path: /, // 路径 name: Home, // 路由名称推荐命名便于编程式导航和工具调试 component: () import(/views/Home.vue) // 懒加载组件优化首屏性能 }, { path: /about/:id?, // 动态路由?表示参数可选 name: About, component: () import(/views/About.vue) } ] // 2. 创建路由实例 const router createRouter({ history: createWebHistory(process.env.BASE_URL), // 常用History模式 routes // 缩写等同于 routes: routes }) export default router// main.ts 中挂载 import { createApp } from vue import App from ./App.vue import router from ./router const app createApp(App) app.use(router) // 使用路由插件 app.mount(#app)二、路由导航声明式 vs 编程式这是日常开发最常用的部分也是易混淆点。1. 声明式导航 (router-link)在模板中使用相当于增强版的a标签。template !-- to属性指定目标路由 -- router-link to/首页/router-link !-- 使用命名路由和对象形式更易于维护 -- router-link :to{ name: About, params: { id: 123 } } 关于我们 /router-link !-- 替换当前历史记录而不是添加新记录 -- router-link :to{ path: /profile } replace 个人资料 /router-link /template易错点to属性前不加冒号是字符串路径加冒号是JavaScript对象。传参时混淆path和name会导致参数丢失。2. 编程式导航在组件方法中通过useRouter()钩子进行导航更灵活。script setup langts import { useRouter } from vue-router const router useRouter() const goToAbout () { // 方式1路径字符串 router.push(/about) // 方式2路由描述对象推荐尤其配合TS router.push({ name: About, params: { id: 456 } // 动态路由参数 // query: { plan: private } // URL查询参数显示为 /about?planprivate }) // 替换当前位置 // router.replace({ name: Home }) // 前进/后退 // router.go(1) // 前进1步 // router.go(-1) // 后退1步类似 router.back() } /script高频考点router.push与router.replace的区别push会添加新的历史记录replace是替换当前记录。params与query传参的区别见下表。在setup语法糖中如何正确导入和使用useRouter。三、路由传参详解与对比传参是路由的核心功能也是面试和工作中的绝对重点。特性Params 动态路由参数Query 查询参数定义在路由路径中定义占位符跟在URL?后面的键值对路由配置path: /user/:id无需特殊配置URL形式/user/123/user?**id123**namefoo传递方式router.push({ name: User, **params: { id: 123 }** })router.push({ path: /user, **query: { id: 123 }** })获取方式const route useRoute(); route.**params**.idconst route useRoute(); route.**query**.id刷新后如果参数是必选且路径的一部分则保留。若为可选参数(:id?)且未传则丢失。始终保留在URL中刷新页面后参数仍在。适用场景标识资源ID如用户ID、文章ID过滤、排序、分页等可选参数关键点与易错点使用name跳转时传递params如果使用path跳转并传paramsparams会被忽略这是最常见的错误之一。// 错误params 无效 router.push({ path: /user/123, params: { id: 123 } }) // 正确使用 name router.push({ name: User, params: { id: 123 } }) // 或直接在 path 中体现 router.push(/user/123)参数类型通过route.params或route.query获取的参数值都是字符串。如果需要数字或其它类型需要手动转换。const route useRoute() const userId Number(route.params.id) // 转换为数字Props 解耦在路由配置中启用props: true可以将路由参数自动作为组件的props传入使组件更独立、可复用。// 路由配置 { path: /user/:id, component: User, props: true }!-- User.vue 组件 -- script setup langts defineProps{ id: string }() // 直接接收id作为prop /script四、路由守卫权限控制与导航拦截路由守卫是实习和面试的高频考点用于实现登录验证、权限检查等。全局前置守卫router.beforeEach// 在 router/index.ts 中定义 router.beforeEach((to, from, next) { // to: 即将进入的目标路由 // from: 当前导航正要离开的路由 // next: 必须调用的函数用于解析这个钩子 const isAuthenticated checkUserLogin() // 假设的登录检查函数 if (to.meta.requiresAuth !isAuthenticated) { // 如果目标路由需要认证且用户未登录重定向到登录页 next({ name: Login }) } else if (to.name Login isAuthenticated) { // 如果已登录又访问登录页重定向到首页 next({ name: Home }) } else { next() // 放行 } })易错点忘记调用next()函数会导致导航一直处于挂起状态页面无法跳转。next()可以不带参数放行也可以带参数重定向或中断。五、工作与实习中的高频实践要点路由懒加载使用() import(...)语法分割代码提升应用首屏加载速度。这是性能优化的必做项。嵌套路由 (Children Routes)用于具有层级布局的页面如后台管理系统。父路由组件模板中必须有router-view来承载子路由出口。命名视图同一级路由需要同时展示多个组件时使用较少用但需了解概念。路由元信息 (meta字段)在路由配置中添加meta: { requiresAuth: true, title: 首页 }用于在守卫中判断权限或在全局后置守卫中修改页面标题。404 页面处理在路由表最后添加一个捕获所有路径的路由。{ path: /:pathMatch(.*)*, name: NotFound, component: () import(/views/NotFound.vue) }总结掌握Vue Router核心在于理解其在SPA中管理组件与URL映射的本质。从安装配置、两种导航方式、三种传参途径Params, Query, Props到进阶的守卫与元信息每一步都紧密关联实际开发场景。多动手配置路由表在浏览器中观察URL变化和组件切换是巩固知识的最佳方式。结合TypeScript的类型提示如RouteRecordRaw能有效减少编码错误提升开发效率。参考来源小满Router第一章入门vue3 vue-router使用详解「1.9W字总结」一份通俗易懂的 TS 教程入门 实战Vue3 / Ts Router详解【Vue】- 路由及传参零基础Vue入门6——Vue router