Vue Router 从入门到精通：路由核心知识点全解析

小李云雾2026-06-05 12:18

文章目录

    • 一、路由的核心定义与基础使用
      • [1. 路由是什么？](#1. 路由是什么？)
      • [2. 路由使用的完整步骤](#2. 路由使用的完整步骤)
        • [步骤1：安装 Vue Router](#步骤1：安装 Vue Router)
        • [步骤2：配置 main.ts（入口文件）](#步骤2：配置 main.ts（入口文件）)
        • 步骤3：创建路由配置文件（router/index.ts）
        • [步骤4：创建视图组件（views 目录）](#步骤4：创建视图组件（views 目录）)
        • [步骤5：在 App.vue 中使用路由](#步骤5：在 App.vue 中使用路由)
    • [二、路由的两种模式：history vs hash](#二、路由的两种模式：history vs hash)
    • 三、路由跳转的进阶写法
      • [1. `<router-link>` 的两种写法](#1. <router-link> 的两种写法)
      • [2. 命名路由：简化跳转路径](#2. 命名路由：简化跳转路径)
    • 四、嵌套路由：实现页面层级嵌套
    • [五、路由传参：query vs params](#五、路由传参：query vs params)
      • [1. query 参数（路径拼接，如 ?a=1&b=2）](#1. query 参数（路径拼接，如 ?a=1&b=2）)
      • [2. params 参数（路径占位，如 /detail/1）](#2. params 参数（路径占位，如 /detail/1）)
    • [六、编程式导航：JS 控制路由跳转](#六、编程式导航：JS 控制路由跳转)
    • [七、重定向：URL 跳转的"快捷方式"](#七、重定向：URL 跳转的“快捷方式”)
    • [八、易混淆点：route vs router](#八、易混淆点：route vs router)
    • 总结

一、路由的核心定义与基础使用

1. 路由是什么？

核心逻辑链 ：用户访问 URL → 路由匹配 URL 与组件的映射关系 → 渲染对应组件 → 实现页面无刷新切换。

简单来说，路由就是"URL 与页面组件的匹配器"，这也是 SPA 应用的核心特性------通过改变 URL 路径，不重新请求页面，只替换页面中的组件内容。

2. 路由使用的完整步骤

想要在 Vue 项目中使用路由，需遵循以下标准化流程：

步骤1：安装 Vue Router
bash 复制代码 
npm install vue-router@4  # Vue3 对应版本
步骤2：配置 main.ts（入口文件）

引入并挂载路由实例，让整个应用具备路由能力：

typescript 复制代码 
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index.ts' // 引入路由配置

const app = createApp(App)
app.use(router) // 挂载路由
app.mount('#app')
步骤3：创建路由配置文件（router/index.ts）

在 router 目录下新建 index.ts，用于配置"URL-组件"的映射表（路由表）：

typescript 复制代码 
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'

// 路由表配置
const routes = [
  {
    path: '/home', // URL 路径
    component: Home // 匹配的组件
  }
]

// 创建路由实例：可选 history 或 hash 模式
const router = createRouter({
  history: createWebHistory(), // history模式（无#）
  // history: createWebHashHistory(), // hash模式（带#）
  routes
})

export default router
步骤4：创建视图组件（views 目录）

在 views 目录下新建页面组件（如 Home.vue），内容可自定义：

vue 复制代码 
<template>
  <div>
    <h1>首页</h1>
  </div>
</template>
步骤5：在 App.vue 中使用路由

通过 <router-link> 实现跳转（替代 a 标签），<router-view> 作为组件渲染容器：

vue 复制代码 
<template>
  <div>
    <!-- 路由跳转链接 -->
    <router-link to="/home">进入首页</router-link>
    <!-- 匹配的组件将渲染在这里 -->
    <router-view></router-view>
  </div>
</template>

二、路由的两种模式：history vs hash

核心逻辑链 ：模式选择 → URL 格式 → 兼容性/部署要求 → 最终体验。

Vue Router 提供两种路由模式，核心差异在于 URL 格式和部署要求：

模式 URL 特征 优点 缺点
history 模式 无 #（如 /home） URL 美观，接近传统网站 上线需服务端配置（Nginx/Apache），否则刷新 404
hash 模式 带 #（如 #/home） 兼容性好，无需服务端配置 URL 不美观，SEO 优化效果差

选择建议：开发环境可随意，生产环境若有服务端运维支持，优先选 history 模式；无服务端支持则用 hash 模式。

三、路由跳转的进阶写法

1. <router-link> 的两种写法

<router-link> 是路由跳转的核心标签，支持字符串和对象两种写法：

vue 复制代码 
<!-- 字符串写法（简单场景） -->
<router-link to="/home">首页</router-link>

<!-- 对象写法（灵活传参/动态路径） -->
<router-link :to="{ path: '/home' }">首页</router-link>

2. 命名路由：简化跳转路径

核心逻辑链 ：给路由命名 → 跳转时用 name 替代 path → 降低路径维护成本。

当路由路径较长时，可给路由配置 name，跳转时直接用 name 匹配，避免手写长路径：

typescript 复制代码 
// 路由表中配置 name
const routes = [
  {
    name: 'zhuye', // 路由名称
    path: '/home',
    component: Home
  }
]

// 跳转时使用 name（对象写法）
<router-link :to="{ name: 'zhuye' }">首页</router-link>

四、嵌套路由：实现页面层级嵌套

核心逻辑链 ：父路由配置 children → 子路由路径区分绝对/相对 → 父组件预留 <router-view> → 渲染子组件。

实际开发中，页面往往有层级（如"首页-个人中心-设置"），嵌套路由可实现这种层级关系：

关键注意点

  1. 子路由需配置在父路由的 children 数组中；
  2. 子路由 path：带 / 是绝对路径（从根域名开始），不带 / 是相对路径（拼接在父路由 path 后）；
  3. 父组件中必须预留 <router-view>，用于渲染子组件。

示例代码

typescript 复制代码 
// 路由表配置嵌套路由
const routes = [
  {
    path: '/home',
    component: Home,
    // 子路由配置
    children: [
      // 相对路径：最终路径为 /home/profile
      { path: 'profile', component: () => import('../views/Profile.vue') },
      // 绝对路径：最终路径为 /setting
      { path: '/setting', component: () => import('../views/Setting.vue') }
    ]
  }
]
vue 复制代码 
<!-- Home.vue（父组件）：预留子路由渲染容器 -->
<template>
  <div>
    <h1>首页</h1>
    <router-link to="/home/profile">个人中心</router-link>
    <router-view></router-view> <!-- 子组件渲染在这里 -->
  </div>
</template>

五、路由传参：query vs params

核心逻辑链 ：确定传参类型 → 配置路由规则 → 跳转时携带参数 → 目标组件获取参数。

开发中常需跳转时传递数据（如新闻 ID、用户信息），Vue Router 支持两种传参方式：

1. query 参数（路径拼接，如 ?a=1&b=2）

  • 特点：参数拼接在 URL 后，无需提前占位，刷新页面参数不丢失；
  • 适用场景：非核心参数（如筛选条件、分页信息）。
步骤示例
vue 复制代码 
<!-- 1. 跳转并携带 query 参数 -->
<router-link :to="`/news/detail?Id=${news.id}&title=${news.title}`">
  {{ news.title }}
</router-link>

<!-- 或对象写法 -->
<router-link :to="{
  path: '/news/detail',
  query: { Id: news.id, title: news.title }
}">
  {{ news.title }}
</router-link>

<!-- 2. 目标组件获取 query 参数 -->
<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.query) // { Id: '1', title: '新闻标题' }
</script>

2. params 参数（路径占位，如 /detail/1）

  • 特点：参数嵌入 URL 中，需提前在路由表占位，刷新页面参数不丢失；
  • 适用场景：核心参数（如商品 ID、用户 ID）。
步骤示例
typescript 复制代码 
// 1. 路由表中提前占位
const routes = [
  {
    name: 'newsDetail', // 必须配置 name（对象写法跳转时用）
    path: '/news/detail/:Id/:title', // 占位符
    component: () => import('../views/NewsDetail.vue')
  }
]
vue 复制代码 
<!-- 2. 跳转并携带 params 参数 -->
<!-- 字符串写法 -->
<router-link :to="`/news/detail/${news.id}/${news.title}`">
  {{ news.title }}
</router-link>

<!-- 对象写法（必须用 name，不能用 path） -->
<router-link :to="{
  name: 'newsDetail',
  params: { Id: news.id, title: news.title }
}">
  {{ news.title }}
</router-link>

<!-- 3. 目标组件获取 params 参数 -->
<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.params) // { Id: '1', title: '新闻标题' }
</script>

六、编程式导航：JS 控制路由跳转

核心逻辑链 ：场景触发（按钮/登录）→ 引入 useRouter → 创建实例 → 调用跳转方法。

<router-link> 仅适用于点击跳转，若需通过 JS 控制（如按钮点击、登录成功后跳转），需用编程式导航：

核心方法

方法 作用 特点
router.push(path) 跳转页面 保留历史记录（可返回）
router.replace(path) 重定向 不保留历史记录（不可返回）
router.go(n) 前进/后退 n 步 router.go(-1) 等价返回上一页

示例代码

vue 复制代码 
<template>
  <button @click="goNews">跳转到新闻页</button>
  <button @click="goBack">返回上一页</button>
</template>

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

// 跳转新闻页（带 query 参数）
const goNews = () => {
  router.push({
    path: '/news',
    query: { type: 'hot' }
  })
}

// 返回上一页
const goBack = () => {
  router.go(-1)
}
</script>

七、重定向：URL 跳转的"快捷方式"

核心逻辑链 ：访问旧 URL → 路由匹配重定向规则 → 自动跳转到新 URL → 渲染目标组件。

重定向用于将一个 URL 映射到另一个 URL，比如访问 / 自动跳转到 /home：

typescript 复制代码 
const routes = [
  {
    path: '/',
    redirect: '/home' // 重定向到 /home
  },
  {
    path: '/home',
    component: Home
  }
]

八、易混淆点：route vs router

很多开发者会混淆 route 和 router，核心区别如下：

名称 含义 核心作用
router 路由实例（全局） 控制路由跳转（push/replace）
route 当前路由信息（局部） 获取路由参数（query/params）

使用示例：

vue 复制代码 
<script setup>
import { useRouter, useRoute } from 'vue-router'
const router = useRouter() // 跳转用
const route = useRoute()   // 获取参数用

// 跳转
const goToHome = () => router.push('/home')
// 获取参数
console.log(route.query) // 当前页面的 query 参数
</script>

总结

Vue Router 是 Vue 生态的核心部分，掌握它的关键在于理解"URL-组件"的匹配逻辑，再逐步拆解模式、跳转、传参、嵌套等进阶知识点。核心逻辑链可总结为：

配置路由表 → 选择跳转方式 → 处理参数传递 → 适配部署场景。

从基础的路由配置到进阶的编程式导航、嵌套路由，每一步都围绕"无刷新切换组件"的核心目标。掌握这些知识点后，就能灵活应对 SPA 应用中的各种页面跳转和数据传递场景。

相关推荐
weixin_539446781 小时前
使用Java HttpServletResponse和JavaScript Fetch下载文件
java·javascript·python
每天吃饭的羊2 小时前
LeetCode JS 常用辅助数据结构
前端
丑过三八线2 小时前
【无标题】
前端
yuananyun2 小时前
APP 图标规范与设计全攻略：iOS/Android/Web 一次设计多端合规，快速出图
android·前端·ios
李剑一2 小时前
面试问网络？问到我的软肋了。面试官：讲一下HTTP强缓存与协商缓存
前端·面试
小雨下雨的雨2 小时前
近视度数模拟器鸿蒙PC Electron框架技术实现详解
前端·javascript·electron
TE-茶叶蛋2 小时前
Next.js中App Router 全部特殊文件一览
开发语言·javascript·网络
喜欢踢足球的老罗2 小时前
逆向 WhatsApp Web：前端 SDK 深度剖析与 Chrome 插件实战指南
前端·chrome
roseonly_h2 小时前
如何将钉钉微应用在浏览器打开
前端·钉钉
热门推荐
01GitHub 镜像站点022026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf03【AI】2026 年具身智能模型和世界模型总结04Codex 下载安装指南：Windows 和 macOS 官方版下载05Codex 桌面端更新后 Chrome 插件和 Computer Use 不可用，怎么排查和修复06【踩坑记录 | 第一篇】微软商店无法使用时，如何手动安装 OpenAI Codex？附`.msix`文件系统错误解决方法07CC-Switch 下载、安装与使用配置指南【2026.5.29】08Codex 接入 DeepSeek API 完整配置文档09CC-Switch & Claude 基于 Linux 服务器安装使用指南10裂开！ChatGPT 居然开始要手机号验证，附详细解决方法