1. 什么是路由？
在现代 Web 开发中，路由 (Routing) 是单页应用 (SPA) 的核心机制。它负责管理 URL 地址与页面组件之间的对应关系。
当用户点击链接或在地址栏输入 URL 时，Vue Router 不会重新加载整个页面，而是根据配置的规则，动态地将对应的组件渲染到指定的占位符中。这提供了流畅的用户体验，避免了传统多页应用频繁刷新带来的性能损耗。
2. 路由核心三要素
一个完整的 Vue 路由系统主要由以下三个部分组成：
- 路由配置 (Route Rules): 定义 URL 路径与组件的映射表。
- 路由出口 (RouterView): 组件渲染的占位符，匹配到的组件将显示在这里。
- 导航方式 (Navigation): 触发路由切换的机制，包括声明式链接 (
<RouterLink>) 和编程式导航 (router.push).
3. 项目配置解析
3.1 路由表定义 (src/router/index.ts)
在路由配置文件中，通过 createRouter 创建路由器实例，并定义了 routes 数组。
const routes = [{ path: '/', component: HomeView },{ path: '/about', component: AboutView },
]const router = createRouter({history: createWebHistory(), // 使用 HTML5 History 模式routes,
})
3.2 应用入口 (src/App.vue)
根组件 App.vue 承担了布局和路由出口的职责。
<template><h1>Hello App!</h1><nav><!-- 声明式导航：点击链接切换路由 --><RouterLink to="/">Go to Home</RouterLink><RouterLink to="/about">Go to About</RouterLink></nav><main><!-- 路由出口：匹配的 HomeView 或 AboutView 将在此渲染 --><RouterView /></main>
</template>
4. 视图组件详解
本项目包含两个主要视图，分别展示了 Vue Router 在 Options API 和 Composition API 两种风格下的使用方式。
4.1 HomeView：Options API 与编程式导航
src/views/HomeView.vue 演示了在传统的 Vue 2 风格（Options API）中如何使用路由。
核心代码分析：
export default {methods: {goToAbout() {// 编程式导航this.$router.push('/about')},},
}
关键点：
this.$router: 在 Options API 中，Vue Router 将路由器实例挂载到了this上。push()方法: 用于向历史记录栈添加一个新的记录。点击浏览器后退按钮可以回到前一个页面。- 场景: 适用于按钮点击、表单提交后跳转等非链接形式的页面切换。
4.2 AboutView：Composition API 与路由参数
src/views/AboutView.vue 演示了在 Vue 3 推荐的 <script setup> (Composition API) 中如何使用路由，并结合了 Query 参数的处理。
核心代码分析：
<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'// 1. 获取实例
const router = useRouter() // 路由器实例（执行动作）
const route = useRoute() // 当前路由信息（获取数据）// 2. 响应式 Query 参数处理
const search = computed({get() {// 读取 URL 中的 query 参数 (例如 /about?search=foo)return route.query.search ?? ''},set(search) {// 修改 URL 中的 query 参数router.replace({ query: { search } })}
})
</script>
关键点：
useRouter(): 等同于 Options API 中的this.$router。用于执行跳转 (push,replace,go) 等操作。useRoute(): 等同于 Options API 中的this.$route。用于获取当前路径 (path)、参数 (params)、查询字符串 (query) 等信息。replace()方法: 与push不同，它替换当前的历史记录。主要用于参数更新，避免用户产生过多的历史记录条目。- 双向绑定: 通过
computed属性，实现了输入框内容与 URL Query 参数的实时同步。
5. 总结
| 功能点 | Options API (HomeView) |
Composition API (AboutView) |
|---|---|---|
| 获取路由器 (执行跳转) | this.$router |
useRouter() |
| 获取路由信息 (读参数) | this.$route |
useRoute() |
| 导航方式 | this.$router.push('/path') |
router.replace(...) |
| 适用场景 | Vue 2 遗留项目或传统写法 | Vue 3 新项目推荐写法 |
通过对比 HomeView 和 AboutView，可以清晰地理解 Vue Router 在不同开发模式下的最佳实践。