Vue Router 入门指南：从零开始实现前端路由管理

Vue Router 是 Vue.js 官方提供的路由管理库，它让我们可以轻松地在 Vue 应用中实现"多页面"导航效果。本文将手把手教你如何使用 Vue Router，构建一个具有多个视图页面的单页应用（SPA）。

🧭 一、什么是 Vue Router？

Vue Router 是 Vue.js 的官方路由管理工具，用于构建单页应用（SPA）。它允许我们在多个"页面"之间切换，而无需刷新浏览器。

特点包括：

像浏览网页一样使用 URL 控制视图
支持嵌套路由、动态路由、命名路由等
支持编程式导航、路由守卫
与 Vue 生态无缝集成

$来源\] Vue Router 官网：[router.vuejs.org/zh/](https://link.juejin.cn?target=https%3A%2F%2Frouter.vuejs.org%2Fzh%2F "https://router.vuejs.org/zh/")$

🔧 二、安装 Vue Router

如果你在使用 create-vue 初始化项目时没有勾选 Router，现在可以手动添加。

✅ 安装方式：

css 复制代码

npm install vue-router@4

Vue 3 对应 Vue Router 版本是 v4，请勿混用 v3（用于 Vue 2）。

📁 三、目录结构建议

bash 复制代码

src/
├── views/              # 页面级组件
│   ├── HomeView.vue
│   └── AboutView.vue
├── router/             # 路由配置文件
│   └── index.js
├── App.vue
└── main.js

📄 四、配置 Vue Router

1️⃣ 创建

router/index.js

javascript 复制代码

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'

import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'About',
    component: AboutView
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

2️⃣ 在

main.js

中注册路由

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')

3️⃣ 修改

App.vue

xml 复制代码

<!-- src/App.vue -->
<template>
  <div>
    <h1>Vue Router 示例</h1>
    <nav>
      <router-link to="/">首页</router-link> |
      <router-link to="/about">关于</router-link>
    </nav>
    <router-view />
  </div>
</template>

router-link 用于导航，router-view 用于展示当前页面组件。

🧪 五、运行测试

运行项目：

arduino 复制代码

npm run dev

打开浏览器访问：

http://localhost:5173/ 👉 显示 Home 页面
http://localhost:5173/about 👉 显示 About 页面

你可以在不刷新页面的情况下进行导航，这正是单页应用的优势。

🔀 六、常用功能一览

功能	示例	说明
编程式导航	router.push('/about')	JS 代码中跳转
动态路由	/user/:id	参数化页面，如用户详情
路由守卫	beforeEach()	拦截未登录用户访问特定页面
懒加载组件	component: () => import(...)	减少初始包体积
嵌套路由	子路由 children: []	实现子页面导航

📚 七、参考文献

Vue Router 中文文档：router.vuejs.org/zh/ [来源]
Vue 官方教程：cn.vuejs.org/guide/essen... [来源]

✅ 八、总结

本文我们学习了：

Vue Router 的基本概念
如何手动安装并配置路由
如何使用 router-link 和 router-view 实现导航
基本的页面跳转与路由结构

如果你觉得本文对你有帮助，欢迎点赞 + 收藏 + 关注 🙌