Vue 3 路由使用完全指南

Vue 3 路由使用完全指南

---

### 文章目录

• [Vue 3 路由使用完全指南](#文章目录 Vue 3 路由使用完全指南 @[toc] 一、整体流程：三个文件三步走 二、第一步：创建路由实例 两种路由模式 三、第二步：注册路由 四、第三步：在组件中使用路由 4.1 页面跳转 4.2 获取路由参数 4.3 声明式跳转（模板中） 五、路由出口：<router-view /> 六、完整项目结构 七、常见错误排查 八、记忆口诀)
• [@toc](#文章目录 Vue 3 路由使用完全指南 @[toc] 一、整体流程：三个文件三步走 二、第一步：创建路由实例 两种路由模式 三、第二步：注册路由 四、第三步：在组件中使用路由 4.1 页面跳转 4.2 获取路由参数 4.3 声明式跳转（模板中） 五、路由出口：<router-view /> 六、完整项目结构 七、常见错误排查 八、记忆口诀)
• [一、整体流程：三个文件三步走](#文章目录 Vue 3 路由使用完全指南 @[toc] 一、整体流程：三个文件三步走 二、第一步：创建路由实例 两种路由模式 三、第二步：注册路由 四、第三步：在组件中使用路由 4.1 页面跳转 4.2 获取路由参数 4.3 声明式跳转（模板中） 五、路由出口：<router-view /> 六、完整项目结构 七、常见错误排查 八、记忆口诀)
• [二、第一步：创建路由实例](#文章目录 Vue 3 路由使用完全指南 @[toc] 一、整体流程：三个文件三步走 二、第一步：创建路由实例 两种路由模式 三、第二步：注册路由 四、第三步：在组件中使用路由 4.1 页面跳转 4.2 获取路由参数 4.3 声明式跳转（模板中） 五、路由出口：<router-view /> 六、完整项目结构 七、常见错误排查 八、记忆口诀)
• [两种路由模式](#文章目录 Vue 3 路由使用完全指南 @[toc] 一、整体流程：三个文件三步走 二、第一步：创建路由实例 两种路由模式 三、第二步：注册路由 四、第三步：在组件中使用路由 4.1 页面跳转 4.2 获取路由参数 4.3 声明式跳转（模板中） 五、路由出口：<router-view /> 六、完整项目结构 七、常见错误排查 八、记忆口诀)
• [三、第二步：注册路由](#文章目录 Vue 3 路由使用完全指南 @[toc] 一、整体流程：三个文件三步走 二、第一步：创建路由实例 两种路由模式 三、第二步：注册路由 四、第三步：在组件中使用路由 4.1 页面跳转 4.2 获取路由参数 4.3 声明式跳转（模板中） 五、路由出口：<router-view /> 六、完整项目结构 七、常见错误排查 八、记忆口诀)
• [四、第三步：在组件中使用路由](#文章目录 Vue 3 路由使用完全指南 @[toc] 一、整体流程：三个文件三步走 二、第一步：创建路由实例 两种路由模式 三、第二步：注册路由 四、第三步：在组件中使用路由 4.1 页面跳转 4.2 获取路由参数 4.3 声明式跳转（模板中） 五、路由出口：<router-view /> 六、完整项目结构 七、常见错误排查 八、记忆口诀)
• [4.1 页面跳转](#文章目录 Vue 3 路由使用完全指南 @[toc] 一、整体流程：三个文件三步走 二、第一步：创建路由实例 两种路由模式 三、第二步：注册路由 四、第三步：在组件中使用路由 4.1 页面跳转 4.2 获取路由参数 4.3 声明式跳转（模板中） 五、路由出口：<router-view /> 六、完整项目结构 七、常见错误排查 八、记忆口诀)
• [4.2 获取路由参数](#文章目录 Vue 3 路由使用完全指南 @[toc] 一、整体流程：三个文件三步走 二、第一步：创建路由实例 两种路由模式 三、第二步：注册路由 四、第三步：在组件中使用路由 4.1 页面跳转 4.2 获取路由参数 4.3 声明式跳转（模板中） 五、路由出口：<router-view /> 六、完整项目结构 七、常见错误排查 八、记忆口诀)
• [4.3 声明式跳转（模板中）](#文章目录 Vue 3 路由使用完全指南 @[toc] 一、整体流程：三个文件三步走 二、第一步：创建路由实例 两种路由模式 三、第二步：注册路由 四、第三步：在组件中使用路由 4.1 页面跳转 4.2 获取路由参数 4.3 声明式跳转（模板中） 五、路由出口：<router-view /> 六、完整项目结构 七、常见错误排查 八、记忆口诀)
• [五、路由出口：`<router-view />`](#文章目录 Vue 3 路由使用完全指南 @[toc] 一、整体流程：三个文件三步走 二、第一步：创建路由实例 两种路由模式 三、第二步：注册路由 四、第三步：在组件中使用路由 4.1 页面跳转 4.2 获取路由参数 4.3 声明式跳转（模板中） 五、路由出口：<router-view /> 六、完整项目结构 七、常见错误排查 八、记忆口诀)
• [六、完整项目结构](#文章目录 Vue 3 路由使用完全指南 @[toc] 一、整体流程：三个文件三步走 二、第一步：创建路由实例 两种路由模式 三、第二步：注册路由 四、第三步：在组件中使用路由 4.1 页面跳转 4.2 获取路由参数 4.3 声明式跳转（模板中） 五、路由出口：<router-view /> 六、完整项目结构 七、常见错误排查 八、记忆口诀)
• [七、常见错误排查](#文章目录 Vue 3 路由使用完全指南 @[toc] 一、整体流程：三个文件三步走 二、第一步：创建路由实例 两种路由模式 三、第二步：注册路由 四、第三步：在组件中使用路由 4.1 页面跳转 4.2 获取路由参数 4.3 声明式跳转（模板中） 五、路由出口：<router-view /> 六、完整项目结构 七、常见错误排查 八、记忆口诀)
• [八、记忆口诀](#文章目录 Vue 3 路由使用完全指南 @[toc] 一、整体流程：三个文件三步走 二、第一步：创建路由实例 两种路由模式 三、第二步：注册路由 四、第三步：在组件中使用路由 4.1 页面跳转 4.2 获取路由参数 4.3 声明式跳转（模板中） 五、路由出口：<router-view /> 六、完整项目结构 七、常见错误排查 八、记忆口诀)

一、整体流程：三个文件三步走

步骤	文件	做什么	导入什么
1	router/index.js	创建路由实例	createRouter, createWebHistory
2	main.js	注册路由插件	router 实例
3	组件	使用路由	useRouter, useRoute

---

二、第一步：创建路由实例

// src/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(), // 不带 # 的 URL
  routes
})

export default router

两种路由模式

模式	方法	URL 示例	服务器配置
History	createWebHistory()	/about	需要
Hash	createWebHashHistory()	/#/about	不需要

---

三、第二步：注册路由

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)  // 别忘了这行！
app.mount('#app')

---

四、第三步：在组件中使用路由

4.1 页面跳转

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

// 路由名称跳转（推荐）
router.push({ name: 'about' })

// 路径跳转
router.push('/about')

// 返回上一页
router.back()
router.go(-1)
</script>

4.2 获取路由参数

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

// 获取路径参数 /user/:id
console.log(route.params.id)

// 获取查询参数 ?keyword=hello
console.log(route.query.keyword)
</script>

4.3 声明式跳转（模板中）

<template>
  <router-link to="/about">关于我们</router-link>
  <router-link :to="{ name: 'home' }">首页</router-link>
</template>

---

五、路由出口：<router-view />

路由匹配的组件会渲染在 <router-view /> 的位置：

<!-- App.vue 根组件 -->
<template>
  <div>
    <nav>
      <router-link to="/">首页</router-link>
      <router-link to="/about">关于</router-link>
    </nav>
    
    <!-- 路由页面在此处显示 -->
    <router-view />
  </div>
</template>

---

六、完整项目结构

src/
├── main.js            # 注册路由
├── App.vue            # 根组件，包含 <router-view />
├── router/
│   └── index.js       # 路由配置
└── views/
    ├── Home.vue       # 首页
    └── About.vue      # 关于页

---

七、常见错误排查

现象	可能原因
点击跳转没反应	router.push 拼写错误
跳转报错 router is undefined	组件中没写 const router = useRouter()
整个路由不工作	main.js 中没有 app.use(router)
URL 变了但页面没变	根组件缺少 <router-view />
导入报错	文件路径不正确

---

八、记忆口诀

创建 → 注册 → 使用，三步缺一不可

• router.js：创建路由，createRouter
• main.js：注册插件，app.use(router)
• 组件中：useRouter() 跳转，useRoute() 取值
  确 |

---