【Vue3】Vue Router 4 路由全解

在 Vue3 前端开发中，Vue Router 4 是官方标配的路由管理器，承担着单页面应用（SPA）页面切换、参数传递、权限控制、路由守卫等核心功能。区别于 Vue2 所用的 Vue Router 3，Vue3 必须使用 Vue Router 4 版本，API 设计更贴合 Composition API，用法更简洁高效。

本文完整覆盖 Vue Router 4 12 大核心知识点，从基础理解、配置、切换效果，到嵌套路由、传参、编程式导航、重定向等实战功能。掌握本文内容，即可应对 Vue3 前端开发中 99% 的路由场景，是 Vue 开发者必备的核心技能。

🌟**【青柠代码录】--- 青柠来相伴，代码更简单** 🌟

🔥**【全栈】博客合集：** https://www.yuque.com/u12587869/zplytb/ur5ohwqxd2axtiny 🔥

🎯**【Java】面试题：** https://www.yuque.com/u12587869/zplytb/eh7yqzitiab693og 🎯

---

1 对路由的理解

核心定义

路由（Route） 本质是 URL 路径与 Vue 组件的映射关系 ；路由器（Router） 是管理所有路由规则、实现路径切换、组件渲染的核心管理器。

在 Vue 单页面应用中，路由的核心价值：

1. 实现无刷新页面切换，提升用户体验，符合 SPA 应用核心特性；

2. 统一管理页面路径与组件的对应关系，便于项目维护和扩展；

3. 支持路由传参、嵌套路由、路由守卫等功能；

4. 配合浏览器历史记录，实现前进、后退等原生交互效果。

核心概念区分

1. 路由（Route） ：单条路径规则，如 /home 对应 Home 组件；

2. 路由器（Router）：管理所有路由规则的实例，全局唯一；

3. 路由组件 ：通过路由规则渲染的页面级组件（存放于 pages/views 目录）；

4. 一般组件 ：通过标签手动引入的公共组件（存放于 components 目录）；

5. RouterLink ：路由导航组件，替代原生 <a> 标签，实现无刷新跳转；

6. RouterView：路由占位组件，匹配到路由规则后，自动渲染对应组件。

---

2 基本切换效果（Vue Router 4 基础配置）

Vue3 中强制使用 Vue Router 4，不兼容低版本，项目标准配置如下：

第一步：安装依赖

# npm 安装
npm install vue-router@4
# yarn 安装
yarn add vue-router@4
# pnpm 安装（主流）
pnpm add vue-router@4

第二步：创建路由配置文件（标准目录结构）

项目标准路径：src/router/index.ts

// 1. 从 vue-router 4 导入核心方法
import { createRouter, createWebHistory } from 'vue-router'
​
// 2. 导入路由组件（页面级组件）
import Home from '@/pages/Home.vue'
import News from '@/pages/News.vue'
import About from '@/pages/About.vue'
​
// 3. 创建路由器实例
const router = createRouter({
  // 配置路由模式（history 模式，首选）
  history: createWebHistory(),
  // 路由规则数组：路径与组件的映射关系
  routes: [
    {
      path: '/home',    // 访问路径
      component: Home   // 匹配路径后渲染的组件
    },
    {
      path: '/news',
      component: News
    },
    {
      path: '/about',
      component: About
    }
  ]
})
​
//  导出路由器实例，供 main.ts 使用
export default router

第三步：在入口文件注册路由

项目标准入口：src/main.ts

import { createApp } from 'vue'
import App from './App.vue'
// 导入路由实例
import router from './router/index'
​
const app = createApp(App)
​
// 全局注册路由（核心步骤）
app.use(router)
​
// 挂载应用
app.mount('#app')

第四步：根组件编写导航与占位区（App.vue）

<template>
  <div class="app">
    <h2 class="title">Vue路由测试</h2>
​
    <!-- 导航区：RouterLink 实现路由跳转 -->
    <div class="navigate">
      <!-- to：目标路径；active-class：激活时的样式类名 -->
      <RouterLink to="/home" active-class="active">首页</RouterLink>
      <RouterLink to="/news" active-class="active">新闻</RouterLink>
      <RouterLink to="/about" active-class="active">关于</RouterLink>
    </div>
​
    <!-- 展示区：RouterView 路由占位符，匹配的组件在此渲染 -->
    <div class="main-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>
​
<!-- Vue3 + TS + setup 语法糖（标准写法） -->
<script lang="ts" setup name="App">
// 导入路由核心组件
import { RouterLink, RouterView } from 'vue-router'
</script>
​
<style scoped>
/* 基础样式 */
.app {
  width: 1200px;
  margin: 0 auto;
}
.navigate {
  margin: 20px 0;
}
.navigate a {
  margin: 0 10px;
  text-decoration: none;
  color: #333;
}
/* 路由激活样式 */
.active {
  color: #1989fa !important;
  font-weight: bold;
}
.main-content {
  padding: 20px;
  border: 1px solid #eee;
  min-height: 300px;
}
</style>

效果说明

点击导航按钮，URL 无刷新切换，RouterView 位置自动渲染对应组件，实现基础路由切换。

即： 页面不整个刷新、不白屏、不重新加载，但浏览器地址栏的网址变了，页面内容也跟着变了，页面局部内容替换。

---

3 两个核心注意点（开发规范）

1. 组件目录划分规范

组件类型	存放目录	定义	示例
路由组件	pages / views	靠路由规则渲染的页面级组件	Home、News、About
一般组件	components	手动编写标签引入的公共组件	Header、Footer、Table

意义：目录结构清晰，便于多人协作开发，快速区分页面组件与公共组件。

2. 路由组件的挂载 / 卸载机制

• 默认行为：通过导航切换时，上一个路由组件会被卸载（unmounted），新组件被挂载（mounted）；

• 场景：组件卸载会销毁数据、定时器、事件监听，避免内存泄漏；

• 特殊需求：需要缓存路由组件时，使用 <KeepAlive> 包裹 RouterView（后续高阶知识点）。

---

4 路由器工作模式（必选配置）

Vue Router 4 提供 history 和 hash 两种模式，开发优先选择 history 模式。

1. history 模式（推荐）

import { createWebHistory } from 'vue-router'
const router = createRouter({
  history: createWebHistory(), // 开启 history 模式
  routes: []
})

• 优点：URL 美观无 #，贴近传统网站，SEO 优化效果更好；

• 缺点：项目上线需要服务端配置（Nginx/Node.js），否则刷新页面会报 404；

代码

history: createWebHistory()

真实网址长这样

https://www.xxx.com/home
https://www.xxx.com/news
https://www.xxx.com/about

特点（看一眼就懂）

• 没有 #

• 网址干净、好看、像传统网站

• 用户看着舒服

• 搜索引擎更喜欢（SEO 更好）

缺点（真实场景）

你部署上线后：

• 正常点击跳转：没问题

• 一按 F5 刷新 → 直接报 404 页面不存在

为什么会 404？

因为 /home 不是服务器真实存在的文件，是前端路由虚拟出来的。必须让后端 / 运维配置 Nginx 指向 index.html 才能解决。

2. hash 模式（兼容优先）

import { createWebHashHistory } from 'vue-router'
const router = createRouter({
  history: createWebHashHistory(), // 开启 hash 模式
  routes: []
})

• 优点：兼容性极强，无需服务端配置，刷新无 404；

• 缺点：URL 携带 # 不美观，SEO 优化效果差；

• 适用场景：内网系统、无需 SEO 的后台管理系统。

代码

history: createWebHashHistory()

真实网址长这样

https://www.xxx.com/#/home
https://www.xxx.com/#/news
https://www.xxx.com/#/about

特点（看一眼就懂）

• 带 # 号

• 网址不太美观

• # 后面的内容永远不会发给服务器

• 刷新永远不会 404（最稳）

优点（真实场景）

不管怎么刷新：

• 永远不会 404

• 不用找后端配 Nginx

• 上线即跑，零配置

缺点

• 网址丑

• SEO 不友好（搜索引擎不解析 # 后面内容）

---

5 to 的两种写法（RouterLink 核心用法）

to 属性用于指定跳转目标，支持字符串 和对象两种写法，开发按需使用。

1. 字符串写法（简单场景）

适合无参数、固定路径的跳转，语法简洁：

<RouterLink active-class="active" to="/home">首页</RouterLink>

2. 对象写法（复杂场景）

适合传参、命名路由跳转，扩展性更强：

<RouterLink active-class="active" :to="{ path: '/home' }">首页</RouterLink>

注意：对象写法必须加冒号（v-bind），否则会被解析为普通字符串。

---

6 命名路由（简化路由写法）

核心作用

给路由规则设置 name 属性，通过名称跳转路由，避免硬编码长路径，简化嵌套路由、传参写法。

1. 配置命名路由

const routes = [
  {
    name: 'zhuye',    // 路由名称（唯一，建议语义化）
    path: '/home',
    component: Home
  },
  {
    name: 'xinwen',
    path: '/news',
    component: News
  },
  {
    name: 'guanyu',
    path: '/about',
    component: About
  }
]

2. 基于命名路由跳转

<!-- 传统写法：路径跳转（硬编码，维护麻烦） -->
<RouterLink to="/about">关于</RouterLink>
<RouterLink :to="{ path: '/about' }">关于</RouterLink>
​
<!-- 命名路由写法：名称跳转（推荐，维护便捷） -->
<RouterLink :to="{ name: 'guanyu' }">关于</RouterLink>

---

7 嵌套路由（多级页面核心）

应用场景

页面内部包含子页面（如：新闻列表 → 新闻详情、用户中心 → 个人信息），必须使用嵌套路由实现。

实战步骤

1. 创建子路由组件 ：src/pages/News/Detail.vue

2. 配置子路由规则（children）

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      name: 'zhuye',
      path: '/home',
      component: Home
    },
    {
      name: 'xinwen',
      path: '/news',
      component: News,
      // 子路由配置（核心）
      children: [
        {
          name: 'xiangqing',
          path: 'detail', // 子路径无需加 /，自动拼接父路径
          component: () => import('@/pages/News/Detail.vue') // 路由懒加载（优化）
        }
      ]
    },
    {
      name: 'guanyu',
      path: '/about',
      component: About
    }
  ]
})

1. 父组件预留子路由占位符（News.vue）

<template>
  <div class="news">
    <h3>新闻列表</h3>
    <!-- 子路由导航 -->
    <RouterLink :to="{ path: '/news/detail' }">查看新闻详情</RouterLink>
    <!-- 子路由渲染占位符 -->
    <RouterView />
  </div>
</template>

1. 跳转写法

<!-- 完整路径跳转 -->
<RouterLink to="/news/detail">详情</RouterLink>
<!-- 命名路由跳转（推荐） -->
<RouterLink :to="{ name: 'xiangqing' }">详情</RouterLink>

---

8 路由传参（数据传递核心）

路由传参是页面间数据传递的核心方式，分为 query 参数 和 params 参数，用法与限制完全不同，必须严格区分。

8.1、query 参数（常用，无强制限制）

1. 传递参数

<!-- 写法1：字符串拼接（不推荐，复杂参数易出错） -->
<RouterLink to="/news/detail?id=1&title=Vue教程">详情</RouterLink>
​
<!-- 写法2：对象写法（推荐） -->
<RouterLink 
  :to="{
    path: '/news/detail',
    query: {
      id: 1,
      title: 'Vue Router 实战教程'
    }
  }"
>
  查看详情
</RouterLink>

2. 接收参数（子组件）

<script lang="ts" setup>
// 导入获取路由参数的 hook
import { useRoute } from 'vue-router'
const route = useRoute()
​
// 获取 query 参数
console.log(route.query) // { id: '1', title: 'Vue Router 实战教程' }
const { id, title } = route.query
</script>

8.2、params 参数（路径参数，有严格限制）

1. 前置配置：路由占位

// 路由规则必须提前占位
children: [
  {
    name: 'xiangqing',
    // 占位：id/title/content 为 params 参数名
    path: 'detail/:id/:title/:content', 
    component: Detail
  }
]

2. 传递参数

<!-- 写法1：字符串模板拼接 -->
<RouterLink :to="`/news/detail/1/Vue教程/路由核心`">详情</RouterLink>
​
<!-- 写法2：对象写法（必须用 name，不能用 path！！！） -->
<RouterLink 
  :to="{
    name: 'xiangqing', // 强制使用 name，path 无效
    params: {
      id: 1,
      title: 'Vue教程',
      content: '路由核心'
    }
  }"
>
  查看详情
</RouterLink>

3. 接收参数

<script lang="ts" setup>
import { useRoute } from 'vue-router'
const route = useRoute()
​
// 获取 params 参数
console.log(route.params) // { id: '1', title: 'Vue教程', content: '路由核心' }
</script>

核心区别

参数类型	路径显示	配置要求	跳转限制
query	?key=value	无需占位	支持 path/name
params	/value	必须占位	仅支持 name

---

9 路由的 props 配置（简化参数接收）

核心作用

将路由参数（query/params）转化为组件的 props，解耦路由与组件，让组件更通用、便于单元测试。

三种配置写法

{
  name: 'xiangqing',
  path: 'detail/:id/:title',
  component: Detail,
  // 写法1：布尔值（仅传递 params 参数）
  // props: true
​
  // 写法2：对象（静态参数，固定值）
  // props: { type: 'news', status: 'published' }
​
  // 写法3：函数（首选，可自定义传递参数）
  props(route) {
    // 合并 query + params 参数
    return {
      ...route.params,
      ...route.query
    }
  }
}

组件接收（直接用 props 接收）

<script lang="ts" setup>
// 直接接收路由参数，无需 useRoute
const props = defineProps<{
  id: string
  title: string
}>()
console.log(props.id, props.title)
</script>

---

10 replace 属性（控制浏览器历史记录）

核心作用

控制路由跳转时浏览器历史记录的写入模式，避免返回时出现冗余页面。

两种模式

1. push（默认）：追加历史记录，点击返回可回到上一页；

2. replace：替换当前记录，点击返回会跳过当前页。

开启 replace 模式

<!-- 标签式开启 -->
<RouterLink replace to="/news">新闻</RouterLink>
​
<!-- 完整写法 -->
<RouterLink :replace="true" to="/news">新闻</RouterLink>

---

11 编程式导航（核心用法）

场景

通过JS 代码 实现路由跳转（如：登录成功后跳转、表单提交后跳转），替代 RouterLink 标签。

Vue3 标准写法（Composition API）

<script lang="ts" setup>
// 导入两个核心 hook
import { useRoute, useRouter } from 'vue-router'
​
// useRoute：获取当前路由信息（参数、路径等）
const route = useRoute()
// useRouter：路由器实例，执行跳转逻辑
const router = useRouter()
​
// 1. push 跳转（追加历史记录）
const goHome = () => {
  router.push('/home')
  // 对象写法
  router.push({ name: 'zhuye' })
  // 传参写法
  router.push({ path: '/news/detail', query: { id: 1 } })
}
​
// 2. replace 跳转（替换历史记录）
const goAbout = () => {
  router.replace({ name: 'guanyu' })
}
​
// 3. 前进/后退
const goBack = () => router.back()
const goForward = () => router.forward()
</script>

---

12 重定向（项目必备）

核心作用

将默认路径 / 重定向到指定页面，解决项目启动后空白页问题。

标准配置

const routes = [
  // 重定向规则（放在最前面）
  {
    path: '/',          // 根路径
    redirect: '/home'   // 重定向目标路径
    // 命名路由写法（推荐）
    // redirect: { name: 'zhuye' }
  },
  // 其他路由规则
  { path: '/home', component: Home }
]

效果：项目启动访问 http://localhost:5173/，自动跳转到 http://localhost:5173/home。