按由浅入深、必学顺序排好，每一步都带知识点解析 + 作用 + 代码示例，你照着一步步学，学完路由直接吃透，做后台、官网、全栈项目都够用。

前置准备

1. 已创建 Vite + Vue3 项目
2. 安装路由：

bash

npm install vue-router@4

---

第一阶段：基础入门（必会打底）

1. 路由核心概念解析

• 路由：就是地址路径 → 对应页面组件的映射
• 路由出口 <router-view>：页面显示的容器，匹配到的组件在这里渲染
• 路由导航 <router-link>：替代 a 标签，跳转不刷新页面
• 路由模式：控制浏览器地址栏格式

2. 基础配置完整步骤

1. 新建 src/router/index.js
2. 导入核心 API、页面组件
3. 配置 routes 规则
4. 创建路由实例并导出
5. main.js 挂载
6. App.vue 配置导航和出口

3. 三种路由模式详解

createWebHashHistory（hash 模式）

• 地址带 #
• 优点：本地 / 部署刷新不 404，不用服务器配置
• 缺点：地址不美观，SEO 差
• 适用：后台管理系统、练习项目

createWebHistory（history 模式）

• 地址无 #，干净好看
• 优点：美观、SEO 友好
• 缺点：部署需要 Nginx 配置，否则刷新 404
• 适用：官网、正式线上项目

createMemoryHistory

• 无浏览器地址变化
• 适用：SSR 服务端渲染、单元测试，日常开发不用

4. 路径符号彻底搞懂

• ./ 当前同级目录
• ../ 回到上一级目录
• @ 等价 src/ 别名，简化路径，告别多层../

---

第二阶段：核心语法（开发天天用）

1. 路由重定向 redirect

解析：访问某个路径，自动跳转到另一个路径场景：打开根路径 / 自动跳到首页 /home

js

{ path: '/', redirect: '/home' }

2. 路由别名 alias

解析：同一个页面，多个地址可以访问场景：/home 和 / 都访问首页

js

{ path: '/home', alias: '/', component: ()=>import('@/views/Home.vue') }

3. 静态路由

解析：固定写死的路由地址，所有人都能访问适用：首页、登录页、关于页等公共页面

4. 动态路由 params 参数

解析：路径带可变参数，如用户 ID、文章 ID地址：/user/1001

路由配置

js

{ path: '/user/:id', component: ()=>import('@/views/User.vue') }

组件内取值

vue

<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
// 获取动态参数
console.log(route.params.id)
</script>

5. 查询路由 query 参数

解析：问号后面的参数，/list?name=张三&age=20

取值

js

route.query.name
route.query.age

区别：

• params：路径一部分，地址更优雅
• query：拼接在后面，适合筛选、分页参数

6. 声明式导航 vs 编程式导航

声明式：<router-link>

模板中直接写，适合菜单导航

vue

<router-link to="/home">首页</router-link>

编程式：useRouter 跳转

解析：JS 代码里跳转，点击按钮、接口请求后跳转必用

vue

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()

// 字符串跳转
const goAbout = () => {
  router.push('/about')
}
// 带动态参数跳转
const goUser = () => {
  router.push(`/user/2026`)
}
</script>

7. 路由懒加载

解析：不一次性加载所有页面，用到才加载，提升首屏加载速度写法：不用 import 提前导入，用函数形式

js

component: () => import('@/views/About.vue')

企业项目必用，否则页面多了首屏卡顿。

---

第三阶段：进阶核心（企业必备）

1. 嵌套路由 children

解析：页面里包含子页面，典型结构：侧边栏 + 顶部导航 + 中间子页面规则：父组件必须再放一个 <router-view>

配置示例

js

{
  path: '/admin',
  component: ()=>import('@/views/Admin.vue'),
  children: [
    { path: 'user', component: ()=>import('@/views/Admin/User.vue') },
    { path: 'order', component: ()=>import('@/views/Admin/Order.vue') }
  ]
}

访问地址：/admin/user

2. 路由元信息 meta

解析：给路由附加自定义标记，用来存页面标题、是否需要登录、是否隐藏菜单

js

{
  path: '/admin',
  component: ()=>import('@/views/Admin.vue'),
  meta: {
    title: '管理员中心',
    needLogin: true, // 需要登录才能访问
    hidden: false
  }
}

3. 路由守卫（重中之重）

解析：路由跳转前后的拦截函数，用来做登录鉴权、权限控制、修改页面标题分三类：

1. 全局前置守卫：所有路由跳转都经过
2. 路由独享守卫：只给某一个路由单独设置
3. 组件内守卫：写在页面组件内部

全局守卫示例（登录拦截）

js

router.beforeEach((to, from, next) => {
  // to 要去的页面
  // from 来自哪个页面
  // next 放行/跳转

  if (to.meta.needLogin) {
    // 判断是否有登录token
    const token = localStorage.getItem('token')
    token ? next() : next('/login')
  } else {
    next()
  }
})

---

第四阶段：工程化高阶（大型项目必学）

1. 路由模块化拆分

解析：项目页面多了，把路由拆成多个文件：home路由、admin路由、用户路由，统一引入，方便维护

2. 动态添加路由

解析：后端返回菜单列表，前端根据接口动态生成路由，做权限管理（不同角色看到不同菜单）用到 router.addRoute()

3. 路由与 KeepAlive 缓存

解析：进入页面不重复请求接口、保留页面状态，搭配路由实现页面缓存

4. 路由滚动行为

解析：切换页面自动回到顶部，解决页面滚动位置保留问题

5. 部署 404 问题解决

• hash 模式：无需配置
• history 模式：Nginx 配置，解决刷新 404

6. 404 兜底页面

解析：匹配不到的路径，统一跳转到 404 页面

js

{ path: '/:pathMatch(.*)*', redirect: '/404' }

---

最优学习顺序（照着学不迷路）

1. 基础配置 + 两种路由模式
2. ./../ @ 路径吃透
3. 重定向 + 别名
4. 动态路由 params + 查询路由 query
5. 声明式 + 编程式导航
6. 路由懒加载
7. 嵌套路由 children
8. 路由元信息 meta
9. 路由守卫（登录拦截）
10. 模块化拆分 + 404 页面
11. KeepAlive 缓存 + 滚动行为
12. 动态路由 + 部署 Nginx 配置