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`

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

javascript 复制代码

// 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`	不需要

三、第二步：注册路由

javascript 复制代码

// 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 页面跳转

vue 复制代码

<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 获取路由参数

vue 复制代码

<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 声明式跳转（模板中）

vue 复制代码

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

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

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

vue 复制代码

<!-- 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() 取值
确 |

Vue 3 路由使用完全指南

Vue 3 路由使用完全指南

### 文章目录

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

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

两种路由模式

三、第二步：注册路由

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

4.1 页面跳转

4.2 获取路由参数

4.3 声明式跳转（模板中）

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

六、完整项目结构

七、常见错误排查

八、记忆口诀

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