前言前面我们学完了 Vue3 所有核心语法组合式API、响应式、生命周期、计算属性、侦听器、组件通信。但这些只能写单页面组件。真正的企业项目、官网、后台管理系统全部都是多页面跳转、路由切换。想要搭建完整 Vue 工程项目必须掌握Vue Router 路由。路由是 Vue 工程化的核心骨架负责页面跳转、权限控制、菜单匹配、页面渲染是进阶必备技能。一、路由是什么面试满分定义Vue Router 是 Vue 官方的单页面路由管理器。传统网页跳转是「刷新页面、请求新页面」单页应用路由是不刷新浏览器通过JS动态替换页面组件。核心价值实现无刷新页面跳转SPA单页应用URL地址对应页面组件实现前进、后退、刷新页面不丢失状态统一项目页面架构二、Vue Router 安装与基础配置1. 安装路由Vue3 对应 router4.xnpm install vue-router42. 基础路由配置企业标准结构新建 /router/index.js 路由文件import { createRouter, createWebHistory } from vue-router // 导入页面组件 import Home from /views/Home.vue import About from /views/About.vue // 路由规则 const routes [ { path: /, name: Home, component: Home }, { path: /about, name: About, component: About } ] // 创建路由实例 const router createRouter({ history: createWebHistory(), // history模式无# routes }) export default router3. 全局挂载路由main.js 引入挂载全局生效import { createApp } from vue import App from ./App.vue import router from ./router createApp(App).use(router).mount(#app)三、路由出口必须配置router-view页面组件渲染的位置没有出口页面无法显示template div classapp !-- 路由导航栏 -- router-link to/首页/router-link router-link to/about关于我们/router-link !-- 路由出口页面在这里渲染 -- router-view/router-view /div /template四、两种跳转方式项目100%高频1. 声明式导航router-link标签跳转适合菜单、固定导航无需JS自动高亮、阻止默认刷新。router-link to/首页/router-link2. 编程式导航useRouterJS跳转适合按钮点击、接口回调、条件判断后跳转企业业务最常用。script setup import { useRouter } from vue-router const router useRouter() const goAbout () { router.push(/about) } /script五、路由传参两种方案必考必用1. query传参问号参数、刷新不丢失类似 get 请求参数地址栏可见刷新页面参数保留。// 跳转传参 router.push({ path: /detail, query: { id: 1001, title: 文章标题 } }) // 接收参数 import { useRoute } from vue-router const route useRoute() console.log(route.query.id)2. params传参动态路由、隐式参数参数隐藏、地址栏简洁需要配置动态路由规则。// 路由规则配置 { path: /detail/:id, name: Detail, component: () import(/views/Detail.vue) } // 跳转 router.push({ name: Detail, params: { id: 1001 } }) // 接收 console.log(route.params.id)六、路由模式区别面试高频1. history 模式地址干净无 #需要后端配置兜底否则刷新404。2. hash 模式地址带 #无需后端配置兼容性好适合纯静态项目。七、本篇结语本篇完成了 Vue Router零基础入门掌握了路由核心用法、跳转、传参、模式区别。从此你的项目不再是单页静态页面而是真正的多页面工程化项目。下一篇我们进阶企业级路由架构路由懒加载、嵌套路由、路由守卫、权限控制直接对标中后台企业项目标准。