一、前言
你是否见过这样的网站：点击导航菜单，页面内容变了，但浏览器并没有"刷新"？
这就是 单页应用（SPA） 的典型特征，而实现这种"无刷新跳转"的核心技术，就是------前端路由。
在 Vue 中，我们使用 vue-router 来管理页面之间的跳转。它是 Vue 官方的路由管理器，与 Vue 深度集成，使用非常简单。
本文将带你： ✅ 理解什么是前端路由
✅ 快速搭建一个带路由的 Vue 项目
✅ 掌握 router-link 和 router-view 的基本用法
✅ 实现页面跳转与参数传递
无需任何前置知识，跟着步骤一步步操作，你也能轻松实现页面切换！
二、什么是路由？
在 Web 开发中，"路由"原本是服务器端的概念：根据不同的 URL，返回不同的页面内容。
而在前端，"前端路由"指的是：根据不同的 URL，渲染不同的组件，而不刷新整个页面。
比如：
- 访问
/→ 显示首页 - 访问
/about→ 显示关于页 - 访问
/user/123→ 显示用户 123 的信息
这一切都在同一个 HTML 页面中完成，用户体验更流畅。
三、创建一个带路由的 Vue 项目
1. 使用 Vue CLI 创建项目（推荐）
bash
# 安装 Vue CLI（如果未安装）
npm install -g @vue/cli
# 创建项目
vue create my-project
# 进入项目
cd my-project在创建过程中，选择 "Manually select features" ，然后勾选 Router ，这样会自动安装并配置 vue-router。
2. 项目结构说明
安装 vue-router 后，项目中会多出以下文件：
src/
├── router/
│ └── index.js # 路由配置文件
├── views/
│ ├── Home.vue # 首页组件
│ └── About.vue # 关于页组件
└── App.vue # 根组件，包含 router-view四、基本路由配置
打开 src/router/index.js，你会看到类似代码：
javascript
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
// 定义路由规则
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
// 创建路由实例
const router = createRouter({
history: createWebHistory(), // 使用 history 模式
routes
})
export default router✅ 这段代码的意思是：
- 当 URL 是
/时，显示Home组件 - 当 URL 是
/about时，显示About组件
五、使用 <router-view> 和 <router-link>
1. <router-view>：路由出口
<router-view> 是一个占位符，匹配到的组件会在这里显示。
打开 App.vue：
html
<template>
<div id="app">
<h1>我的网站</h1>
<!-- 导航菜单 -->
<nav>
<router-link to="/">首页</router-link> |
<router-link to="/about">关于</router-link>
</nav>
<!-- 路由组件渲染在这里 -->
<router-view></router-view>
</div>
</template>
<style>
nav a {
text-decoration: none;
margin: 0 10px;
}
nav a.router-link-exact-active {
color: #42b983;
font-weight: bold;
}
</style>2. <router-link>：声明式导航
to="/"表示点击后跳转到/路径- 它会被渲染为
<a>标签，但不会刷新页面 - 当前激活的链接会自动添加
router-link-exact-active类，可用于样式高亮
六、运行项目
bash
npm run serve打开浏览器访问 http://localhost:8080，你会发现：
- 默认显示"首页"内容
- 点击"关于"，页面内容变为"关于页"，URL 变为
/about，但页面没有刷新！
✅ 恭喜你，已经成功实现了 Vue 的基本路由！
七、动态路由（简单了解）
如果你想根据用户 ID 显示不同内容，比如 /user/1、/user/2，可以使用动态路由。
1. 添加动态路由
javascript
// router/index.js
import User from '../views/User.vue'
const routes = [
// ... 其他路由
{ path: '/user/:id', component: User } // :id 是动态参数
]2. 在组件中获取参数
html
<!-- views/User.vue -->
<template>
<div>
<h2>用户详情</h2>
<p>当前用户ID：{{ $route.params.id }}</p>
</div>
</template>
<script>
export default {
mounted() {
console.log('用户ID:', this.$route.params.id)
}
}
</script>现在访问 /user/123，页面会显示 "当前用户ID：123"。
八、编程式导航（用 JS 跳转）
除了点击链接，你也可以用 JavaScript 控制跳转。
html
<template>
<div>
<button @click="goHome">回到首页</button>
<button @click="goAbout">去关于页</button>
</div>
</template>
<script>
export default {
methods: {
goHome() {
this.$router.push('/')
},
goAbout() {
this.$router.push('/about')
}
}
}
</script>this.$router.push(path)：跳转到指定路径this.$router.back()：后退一页
九、常见问题
❓ 页面跳转后，浏览器地址栏没变化？
检查是否正确引入了 router：
javascript
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 引入路由
createApp(App).use(router).mount('#app') // 使用路由❓ 刷新页面出现 404？
如果你使用的是 history 模式（正常 URL），需要服务器配置支持，否则刷新会 404。
开发环境下不会有问题，生产部署时需配置服务器（如 Nginx）将所有请求指向 index.html。
十、总结
| 概念 | 作用 |
|---|---|
vue-router |
Vue 的官方路由管理器 |
<router-link> |
用于跳转的链接，不会刷新页面 |
<router-view> |
匹配的组件会在这里显示 |
routes |
定义路径与组件的映射关系 |
$route.params |
获取动态路由参数 |
this.$router.push() |
用 JS 跳转页面 |
📌 一句话记住 ：
路由 = 路径 + 组件 ，通过<router-link>跳转，<router-view>显示。
十一、结语
感谢您的阅读！如果你有任何疑问或想要分享的经验，请在评论区留言交流！