目录一、路由是什么项目为什么必须用路由二、路由完整安装与初始化项目标准流程1. 安装命令2. 目录规范工程化统一标准3. 路由基础配置 router/index.js最简可运行模板4. 在 main.js 挂载路由5. App.vue 放置路由出口页面渲染容器三、两大核心 APIuseRouter /useRoutesetup 必备核心区分一句话四、页面跳转两种方式声明式 编程式1. 声明式导航 模板中静态跳转2. 编程式导航router.push/replace /back按钮、接口回调跳转五、路由传参两种方案实战高频方案 1动态路由 params详情页、编辑页参数在路径中1路由配置 router/index.js2跳转传参3组件接收参数两种写法方案 2query 查询参数搜索、筛选、分页参数在后传参避坑重点六、嵌套路由后台管理系统必备布局1. 路由配置 children2. 父布局 Dashboard.vue 必须写二级路由出口七、路由懒加载性能优化核心1. 作用2. 标准写法3. 分包命名打包后 chunk 文件自定义名称方便排查八、路由守卫权限控制项目核心安全逻辑1. 全局前置守卫 beforeEach最常用统一登录校验2. 路由独享守卫 beforeEnter单个路由单独校验3. 组件内守卫setup 中使用九、实战常见问题与解决方案1. 重复点击导航控制台报错2. history 模式部署后刷新 4043. params 参数刷新丢失4. 路由跳转后页面不回到顶部十、全文核心总结单页应用 SPA 核心依赖就是路由负责页面无刷新跳转、权限控制、页面参数传递、布局嵌套。本文基于 Vue3 script setup组合式 API全部为项目实战可复制代码覆盖日常开发 90% 场景适合长期复习。一、路由是什么项目为什么必须用路由单页面无刷新切换不用整页刷新切换页面体验流畅减少网络请求页面分层管理不同页面对应独立路由地址区分首页、详情、登录、后台等模块携带页面参数列表跳转详情、搜索传参、分页参数存储在地址栏权限拦截控制未登录禁止访问后台、区分普通用户 / 管理员页面布局嵌套侧边栏 顶部导航 子页面通用后台布局靠嵌套路由实现性能优化路由懒加载拆分代码包减小首屏加载体积版本匹配硬性规则Vue3 必须装vue-router4Vue2 使用vue-router3版本混用直接报错。二、路由完整安装与初始化项目标准流程1. 安装命令bash运行# 安装vue-router4写入生产依赖dependencies npm install vue-router42. 目录规范工程化统一标准plaintextsrc/ ├─ router/ │ └─ index.js # 路由总配置文件 ├─ views/ # 页面级组件路由页面 │ ├─ Home.vue │ ├─ Login.vue │ ├─ User.vue │ └─ Dashboard/ # 嵌套路由页面 │ ├─ Profile.vue │ └─ Order.vue └─ main.js # 挂载路由到Vue实例3. 路由基础配置 router/index.js最简可运行模板js运行import { createRouter, createWebHistory } from vue-router // 路由数组统一管理所有页面映射 const routes [ { path: /, redirect: /home // 访问根路径自动重定向首页 }, { path: /home, name: Home, // 命名路由方便params传参 component: () import(../views/Home.vue), // 路由懒加载 meta: { title: 首页, requiresAuth: true } // 自定义元信息 }, { path: /login, name: Login, component: () import(../views/Login.vue), meta: { title: 登录页, requiresAuth: false } }, // 404兜底页面放路由数组最后 { path: /:pathMatch(.*)*, component: () import(../views/404.vue), meta: { title: 页面不存在 } } ] // 创建路由实例 const router createRouter({ history: createWebHistory(), // history模式无#生产需后端配置 // createWebHashHistory() hash模式带#本地开发无需后端 routes, scrollBehavior() { // 每次切换页面自动滚动到顶部 return { top: 0, left: 0 } } }) export default router4. 在 main.js 挂载路由js运行import { createApp } from vue import App from ./App.vue import router from ./router // .use(router) 全局注册路由所有组件可用路由API createApp(App).use(router).mount(#app)5. App.vue 放置路由出口页面渲染容器vuetemplate !-- 路由导航链接替代a标签无刷新跳转 -- router-link to/home首页/router-link router-link to/login登录/router-link !-- 路由出口匹配到的页面组件在这里渲染 -- router-view / /template三、两大核心 APIuseRouter /useRoutesetup 必备核心区分一句话useRouter操作路由跳转、返回、替换页面对应 this.$routeruseRoute读取路由信息路径、参数、meta只读对应 this.$routevuescript setup import { useRouter, useRoute } from vue-router // 操作工具 const router useRouter() // 当前路由信息对象 const route useRoute() console.log(route.path) // 当前路径 /home console.log(route.meta.title) // 页面标题 console.log(route.query) // ?id123 问号参数 console.log(route.params) // /user/123 动态路径参数 /script四、页面跳转两种方式声明式 编程式1. 声明式导航router-link模板中静态跳转vue!-- 基础路径跳转 -- router-link to/home首页/router-link !-- query传参 /user?id100 -- router-link to/user?id100用户100/router-link router-link :to{ path: /user, query: { id: 100 } }用户100/router-link !-- 命名路由 params传参 /user/100 -- router-link :to{ name: User, params: { id: 100 } }用户详情/router-link2. 编程式导航router.push/replace /back按钮、接口回调跳转vuescript setup import { useRouter } from vue-router const router useRouter() // 1. push 追加历史记录可返回上一页最常用 const goHome () router.push(/home) // query传参 const goUserQuery () router.push({ path: /user, query: { id: 100 } }) // params动态参数必须搭配name不能写path const goUserParams () router.push({ name: User, params: { id: 100 } }) // 2. replace 替换当前历史无法返回上一页登录/支付页使用 const toLogin () router.replace(/login) // 3. 页面返回 const goBack () router.back() // 返回上一页 router.go(-2) // 返回前两页 /script五、路由传参两种方案实战高频方案 1动态路由 params详情页、编辑页参数在路径中1路由配置 router/index.jsjs运行{ path: /user/:id, // :id 动态占位符 name: User, component: () import(../views/User.vue), props: true // 自动把params参数转为组件props简化取值 }2跳转传参js运行router.push({ name: User, params: { id: 666 } }) // 地址栏/user/6663组件接收参数两种写法写法 1route.params 读取vuescript setup import { useRoute } from vue-router const route useRoute() const userId route.params.id /script写法 2props 接收推荐解耦路由依赖vuescript setup const props defineProps([id]) console.log(props.id) /script方案 2query 查询参数搜索、筛选、分页参数在后特点参数显示在地址栏刷新页面不丢失适合筛选条件js运行// 跳转 router.push({ path: /list, query: { keyword: vue, page: 1 } }) // 地址栏 /list?keywordvuepage1 // 接收 const route useRoute() const keyword route.query.keyword const page route.query.page传参避坑重点params搭配path会失效必须使用命名路由nameparams 刷新页面丢失参数query 刷新保留详情页 id、唯一标识用 params搜索筛选用 query六、嵌套路由后台管理系统必备布局适用场景侧边栏布局、个人中心子菜单、仪表盘多子页面1. 路由配置 childrenjs运行{ path: /dashboard, name: Dashboard, component: () import(../views/Dashboard/Dashboard.vue), meta: { title: 管理后台, requiresAuth: true }, children: [ // 默认子路由访问/dashboard自动展示profile { path: , redirect: profile }, { path: profile, name: Profile, component: () import(../views/Dashboard/Profile.vue), meta: { title: 个人资料 } }, { path: order, name: Order, component: () import(../views/Dashboard/Order.vue), meta: { title: 订单列表 } } ] }2. 父布局 Dashboard.vue 必须写二级路由出口vuetemplate div classlayout !-- 侧边栏导航 -- div classsidebar router-link to/dashboard/profile个人资料/router-link router-link to/dashboard/order订单/router-link /div !-- 子页面渲染出口 -- router-view / /div /template七、路由懒加载性能优化核心1. 作用打包时把每个路由页面单独拆分成 js 文件访问该页面才加载对应代码大幅减少首屏资源体积解决首页加载缓慢问题。2. 标准写法js运行// 懒加载推荐 component: () import(../views/Home.vue) // 不推荐一次性全部导入首屏加载所有页面 import Home from ../views/Home.vue component: Home3. 分包命名打包后 chunk 文件自定义名称方便排查js运行component: () import(/* webpackChunkName: user */ ../views/User.vue)八、路由守卫权限控制项目核心安全逻辑路由守卫监听页面跳转全过程拦截未登录、无权限访问页面分全局守卫、路由独享守卫、组件内守卫。1. 全局前置守卫 beforeEach最常用统一登录校验写在 router/index.js 路由实例后js运行router.beforeEach((to, from, next) { // to目标页面路由对象 // from当前离开页面 // next放行/跳转函数 const token localStorage.getItem(token) // 模拟登录凭证 // 自动设置页面标题 document.title to.meta.title || 后台管理系统 // 1. 需要登录的页面无token强制跳登录 if (to.meta.requiresAuth) { if (!token) { next(/login) } else { next() // 放行 } } else { // 2. 已登录用户禁止重复进入登录页 if (token to.path /login) { next(/home) } else { next() } } })2. 路由独享守卫 beforeEnter单个路由单独校验js运行{ path: /admin, component: () import(../views/Admin.vue), beforeEnter: (to, from, next) { // 仅管理员可访问 const role localStorage.getItem(role) if (role admin) next() else next(/404) } }3. 组件内守卫setup 中使用vuescript setup import { onBeforeRouteLeave, onBeforeRouteUpdate } from vue-router // 离开当前页面前触发表单未保存弹窗提示 onBeforeRouteLeave((to, from, next) { const isEdit true // 模拟表单已修改 if (isEdit confirm(页面未保存确定离开)) { next() } else { next(false) // 取消跳转 } }) // 当前路由更新同页面切换不同params如/user/1 /user/2 onBeforeRouteUpdate((to) { // 重新请求详情接口 console.log(新id, to.params.id) }) /script九、实战常见问题与解决方案1. 重复点击导航控制台报错js运行// router/index.js 路由实例后添加 const originalPush router.push router.push function push(location) { return originalPush.call(this, location).catch(() {}) }2. history 模式部署后刷新 404后端配置 nginx将所有请求指向 index.html本地开发使用createWebHashHistory()无此问题。3. params 参数刷新丢失改用 query 传参或进入页面时从接口根据 id 重新拉取数据。4. 路由跳转后页面不回到顶部配置 scrollBehavior前文基础配置已写。十、全文核心总结安装规范Vue3 固定npm install vue-router4路由属于生产依赖不加-D目录规范统一 router/index.js 配置views 存放页面组件两大钩子区分useRouter 做跳转操作useRoute 读取参数信息跳转方式模板用router-link逻辑代码用 push/replace/back传参场景详情 id 用 params搜索筛选用 query性能优化所有页面统一使用路由懒加载拆分打包文件布局方案后台侧边栏、子菜单使用嵌套路由 children权限控制全局 beforeEach 守卫统一校验 tokenmeta 标记是否需要登录页面拦截表单保存提示使用组件内 onBeforeRouteLeave 守卫
