vue-router 零基础入门：从安装到实战，轻松搞定 Vue 路由跳转

PeterMap
2 阅读11分钟

刚用 Vue CLI 创建完项目，是不是发现只能写一个页面？想实现“首页→关于页→列表页”的切换，却不知道该怎么操作？其实，只要学会 vue-router，就能轻松实现页面之间的无缝跳转，打造完整的单页应用（SPA）。

vue-router 是 Vue 官方配套的路由解决方案，和 Vue 深度集成，专门用于解决单页应用的页面导航问题[superscript:1]。它不需要页面重新加载，就能实现 URL 变化和页面内容切换，让用户体验更流畅，也是 Vue 开发中不可或缺的核心工具。

今天这篇博客，全程面向零基础小白，无复杂原理、全是实操步骤，从 vue-router 的基本认知、安装配置，到基础跳转、参数传递、嵌套路由，一步步教你吃透 vue-router，看完就能上手实战！

一、先搞懂：vue-router 是什么？为什么要用？

简单来说，vue-router 就是 Vue 项目的“页面导航管家” ——它管理着 URL 路径和 Vue 组件之间的映射关系，当用户点击导航、切换 URL 时，它会自动渲染对应的组件，而不用重新加载整个页面[superscript:7]。

举个通俗的例子：我们平时用的手机 App（比如微信），切换“聊天”“通讯录”“发现”页面时，页面不会重新加载，只是内容切换，这就是路由的作用。vue-router 就是把这种体验，搬到了 Vue 网页开发中。

核心作用（小白必知）：

  • 实现页面无刷新跳转：URL 变化，页面内容切换，不用重新请求服务器，提升用户体验[superscript:4]。
  • 管理路由规则：明确 URL 路径对应哪个组件，逻辑清晰，便于维护。
  • 支持多种跳转方式：可以通过点击导航跳转，也可以通过代码控制跳转（编程式导航）[superscript:4]。
  • 提供丰富功能：支持路由参数传递、嵌套路由、路由守卫、404 页面配置等，满足复杂项目需求[superscript:4]。

一句话总结：只要做 Vue 单页应用（90% 的 Vue 项目都是），就必须用 vue-router，它是实现页面跳转的“标配工具”[superscript:7]。

二、前置条件：使用 vue-router 前需要准备什么？

和使用 Ant Design Vue 一样，vue-router 也需要在 Vue 项目中使用，提前准备好以下两个条件即可：

  1. 已安装 Node.js（LTS 版本）：确保 npm 可用，用于安装 vue-router 包。
  2. 已创建 Vue 项目：无论是用 Vue CLI 创建的 Vue 2 还是 Vue 3 项目，都能使用 vue-router，但注意版本对应（重点！避免报错）。

版本对应规则（必看，避坑关键）：

  • Vue 3 项目：使用 vue-router 4.x 版本（目前主流，本文重点讲解）。
  • Vue 2 项目：使用 vue-router 3.x 版本（安装命令和配置略有差异，文末补充）。

三、核心操作：在 Vue 3 项目中安装并配置 vue-router

本文以「Vue 3 + vue-router 4.x」为例，全程实操，步骤简单，小白跟着敲命令、改代码就行，全程无坑。

1. 进入 Vue 项目目录

打开终端（cmd / Mac 终端），进入你已经创建好的 Vue 项目目录（比如 vue-demo）：

cd vue-demo # 替换成你的 Vue 项目名称

2. 安装 vue-router

执行安装命令，使用 npm 安装 vue-router 4.x 版本（Vue 3 专用）：

npm install vue-router@4 --save

补充说明：

  • --save 表示将 vue-router 添加到项目依赖中，后续项目打包、部署时会自动包含。
  • 如果是 Vue 2 项目，安装命令为：npm install vue-router@3 --save（指定 3.x 版本）[superscript:3]。
  • 也可以用 Vue CLI 快速添加路由：vue add router，CLI 会自动完成安装和基础配置，小白也可以直接使用[superscript:5]。

安装完成后，终端显示“added x packages”，说明安装成功。

3. 创建路由配置文件（关键步骤）

安装完成后，需要手动创建路由配置文件，定义路由规则（URL 路径对应哪个组件）。

  1. 在 src 目录下，新建一个 router 文件夹，然后在 router 文件夹中新建 index.js 文件（路由配置核心文件）。
  2. 打开 src/router/index.js 文件，编写路由配置代码：
  3. createWebHistory：路由模式为 HTML5 模式，URL 中没有 # 号，美观且符合常规 URL 习惯[superscript:3]；如果需要兼容低版本浏览器，可替换为 createWebHashHistory（哈希模式，URL 带 # 号）[superscript:2]。
  4. routes 数组：每一条路由包含 path（URL 路径）、component（对应组件），name 可选，用于后续编程式导航时简化路径[superscript:6]。

4. 创建路由对应的组件

上面的配置中，我们导入了 HomeView 和 AboutView 两个组件，现在需要创建这两个组件（组件放在 src/views 文件夹中，规范命名）：

  1. 在 src 目录下，新建 views 文件夹（用于存放页面级组件，和 components 区分开）。
  2. 在 views 文件夹中，新建 HomeView.vue 文件，编写首页组件内容：
  3. 在 views 文件夹中，新建 AboutView.vue 文件，编写关于页组件内容：

5. 在 main.js 中挂载路由

路由配置完成后，需要在项目入口文件（main.js）中挂载路由，让整个项目都能使用路由功能。

打开 src/main.js 文件，修改内容如下（新增代码已标注）：

import { createApp } from 'vue'
import App from './App.vue'
// 新增：导入路由实例
import router from './router'

const app = createApp(App)
app.use(router) // 挂载路由（关键步骤，必须在 mount 之前）
app.mount('#app')

注意：app.use(router) 必须放在 app.mount('#app') 之前，否则路由无法生效[superscript:2]。

6. 在 App.vue 中添加导航和路由出口

最后一步：在根组件 App.vue 中，添加导航链接（点击跳转）和路由出口（渲染当前路由对应的组件），这是路由显示的核心。

打开 src/App.vue 文件，替换内容如下：

<template>
  <div id="app">
    <!-- 导航链接：使用 router-link 组件，替代 a 标签，无刷新跳转 -->
    <nav>
      <router-link to="/">首页</router-link>
      <router-link to="/about" style="margin-left: 20px;"&gt;关于我们&lt;/router-link&gt;
    &lt;/nav&gt;

    <!-- 路由出口：当前 URL 对应的组件，会渲染到这里 -->
    <router-view></router-view>
  </div>
</template>

<style>
/* 可选：给激活的导航添加样式 */
.router-link-active {
  color: #42b983;
  text-decoration: none;
  font-weight: bold;
}
</style>

关键说明：

  • router-link：vue-router 提供的导航组件，替代传统的 a 标签，点击时不会刷新页面，to 属性指定跳转的 URL 路径[superscript:2]。
  • router-view：路由出口，所有匹配当前 URL 的组件，都会渲染到这个标签中，相当于“组件容器”[superscript:2]。
  • router-link-active：vue-router 自动给当前激活的导航添加的类名，可自定义样式，区分当前所在页面[superscript:3]。

四、实操测试：运行项目，查看路由跳转效果

所有配置完成后，启动项目，测试路由跳转是否正常：

npm run dev # 或 npm run serve

启动成功后，浏览器访问 http://localhost:8080，会看到：

  1. 页面显示“首页”内容，导航中“首页”处于激活状态（样式变化）。
  2. 点击“关于我们”，URL 会变成 http://localhost:8080/about，页面切换为“关于我们”内容，无刷新、无卡顿。
  3. 点击浏览器后退按钮，能回到首页，路由历史记录正常。

到这里，你已经成功实现了 vue-router 的基础跳转！是不是超级简单？

五、vue-router 核心用法（小白必学）

掌握了基础配置和跳转后，再学习几个核心用法，满足日常开发需求，小白重点掌握前3个即可。

1. 编程式导航（通过代码控制跳转）

除了用 router-link 点击跳转，还可以通过代码控制跳转（比如点击按钮跳转），核心使用 router.push() 方法[superscript:4]。

示例（在 HomeView.vue 中添加按钮，点击跳转到关于页）：

<template>
  <div class="home">
    <h1>首页</h1>
    <p>这是 vue-router 实战的首页，点击导航可切换页面&lt;/p&gt;
    <!-- 按钮点击跳转 -->
    <button @click="goToAbout">点击跳转到关于页</button>
  </div>
</template>

<script setup>
// 导入 useRouter 方法，获取路由实例
import { useRouter } from 'vue-router'

const router = useRouter()

// 定义跳转函数
const goToAbout = () => {
  // 方式1：跳转指定路径
  router.push('/about')
  // 方式2：通过路由名称跳转（需要给路由配置 name）
  // router.push({ name: 'About' })
}
</script>

补充：router.push() 会添加一条新的路由历史记录，点击后退能回到上一页；如果想替换当前历史记录（后退不会回到上一页），可用 router.replace()。

2. 路由参数传递（页面间传值）

开发中经常需要在页面间传递参数（比如从列表页跳转到详情页，传递商品 ID），vue-router 支持两种常用传参方式，小白重点掌握 query 传参。

方式1：query 传参（推荐，类似 GET 请求，参数显示在 URL 中）

// 1. 跳转时传递参数（以首页跳转到关于页为例）
// HomeView.vue 中
const goToAbout = () => {
  // 传递参数：id 和 name
  router.push({
    path: '/about',
    query: {
      id: 1,
      name: 'vue-router 教程'
    }
  })
}

// 2. 接收参数（在 AboutView.vue 中）
<script setup>
import { useRoute } from 'vue-router'

const route = useRoute()
// 接收 query 参数
console.log(route.query.id) // 输出 1
console.log(route.query.name) // 输出 vue-router 教程
</script>

// 3. 页面中使用参数
<template>
  <div class="about">
    <h1>关于我们</h1>
    <p>接收的参数：ID={{ route.query.id }}, 名称={{ route.query.name }}</p>
  </div>
</template>

特点：参数会显示在 URL 中（如 /about?id=1&name=vue-router 教程），刷新页面参数不会丢失。

方式2：params 传参（类似 POST 请求，参数不显示在 URL 中）

// 1. 先修改路由规则，添加参数占位符（src/router/index.js）
const routes = [
  {
    path: '/about/:id/:name', // 添加占位符 :id 和 :name
    name: 'About',
    component: AboutView
  }
]

// 2. 跳转时传递参数
router.push({
  name: 'About', // params 传参必须用 name 跳转，不能用 path
  params: {
    id: 1,
    name: 'vue-router 教程'
  }
})

// 3. 接收参数（和 query 接收方式一致）
console.log(route.params.id)
console.log(route.params.name)

特点：参数不显示在 URL 中，更美观，但刷新页面后参数会丢失，适合传递非必要参数[superscript:6]。

3. 404 页面配置（匹配不存在的路由）

当用户访问不存在的 URL 时，需要显示 404 页面，提升用户体验，配置方法如下：

  1. 在 views 文件夹中，新建 NotFound.vue 组件：
  2. 在 src/router/index.js 中，添加 404 路由规则（必须放在所有路由的最后）：

测试：访问 http://localhost:8080/abc（不存在的路径），会显示 404 页面，点击“返回首页”可跳回首页。

4. 嵌套路由（页面嵌套页面）

开发中经常会遇到“父页面嵌套子页面”的场景（比如首页嵌套“推荐”“热门”子页面），这时候需要用到嵌套路由[superscript:4]。

核心配置：在父路由中添加 children 数组，存放子路由规则，示例如下：

// src/router/index.js
import HomeView from '../views/HomeView.vue'
import Recommend from '../views/Home/Recommend.vue' // 子组件1
import Hot from '../views/Home/Hot.vue' // 子组件2

const routes = [
  {
    path: '/',
    name: 'Home',
    component: HomeView,
    // 嵌套子路由
    children: [
      {
        path: '', // 子路由默认路径（访问 / 时，默认显示该子组件）
        component: Recommend
      },
      {
        path: 'hot', // 子路由路径（访问 /hot 时显示）
        component: Hot
      }
    ]
  }
]

然后在 HomeView.vue 中，添加子路由出口（router-view），用于渲染子组件：

<template>
  <div class="home">
    <h1>首页</h1&gt;
    <!-- 子路由导航 -->
    <nav>
      <router-link to="/">推荐</router-link>
      <router-link to="/hot" style="margin-left: 20px;">热门</router-link>
    &lt;/nav&gt;
    <!-- 子路由出口：子组件渲染在这里 -->
    <router-view></router-view>
  </div>
</template>

测试：访问 / 时，显示首页 + 推荐子组件；访问 /hot 时，显示首页 + 热门子组件，实现页面嵌套跳转。

六、小白常见问题（避坑指南）

刚开始使用 vue-router 时，小白容易遇到一些小问题，整理了5个最常见的坑，提前避开，少走弯路：

  1. 版本不兼容报错：Vue 3 用了 vue-router 3.x 版本，或 Vue 2 用了 vue-router 4.x 版本，会导致项目报错。解决方法：卸载当前版本，重新安装对应版本（Vue 3 装 4.x，Vue 2 装 3.x）[superscript:3]。
  2. 路由不生效、页面不显示：忘记在 main.js 中挂载路由（app.use(router)），或忘记在 App.vue 中添加 router-view（路由出口）。解决方法：检查 main.js 和 App.vue 的配置，补充缺失的代码[superscript:2]。
  3. 点击 router-link 不跳转：to 属性的值写错（比如多写 /、少写 /），或路由规则中的 path 写错。解决方法：核对 to 属性和路由规则中的 path，确保一致。
  4. 参数接收不到：query 传参用 route.params 接收，或 params 传参用 route.query 接收；params 传参用了 path 跳转（params 传参必须用 name 跳转）。解决方法：用对应方式接收参数，params 传参记得用 name 跳转[superscript:6]。
  5. 404 页面不生效：404 路由规则放在了其他路由前面，导致被前面的路由匹配。解决方法：将 404 路由规则放在所有路由的最后[superscript:3]。

七、Vue 2 + vue-router 3.x 补充（可选）

如果你的项目是 Vue 2，安装和配置方式略有差异，核心区别如下：

  1. 安装命令：npm install vue-router@3 --save[superscript:3]。
  2. 路由配置文件（src/router/index.js）写法：
  3. main.js 挂载路由：

其他用法（跳转、传参、嵌套路由）和 Vue 3 基本一致，只是导入和实例创建方式不同。

八、总结

vue-router 是 Vue 单页应用的“导航核心”，核心逻辑很简单：配置路由规则（URL→组件）→ 挂载路由 → 添加导航和路由出口，就能实现无刷新页面跳转。

对于零基础小白来说，不用深究底层原理，先掌握“安装→配置→基础跳转”这三步，再逐步学习参数传递、404 页面、嵌套路由，就能满足日常开发需求。

本文全程实操，所有代码都能直接复制使用，跟着操作一遍，你就能轻松上手 vue-router。后续多动手练习，熟悉编程式导航、路由守卫等进阶功能，就能灵活应对各种项目场景，成为 Vue 开发的“进阶选手”！

avatar
文章
阅读
粉丝