Vue3 路由
关键要点
- Vue3 路由（Vue Router）是官方工具，用于单页面应用（SPA）实现无刷新内容切换。
- 核心组件包括
<router-link>（导航）和<router-view>（渲染当前路由）。 - 支持懒加载、嵌套路由、参数传递和导航守卫，适合复杂应用。
- 部署时，历史模式需服务器配置，避免 404 错误。
什么是 Vue3 路由？
Vue3 路由允许通过不同的 URL 访问不同内容，适合构建单页面应用（SPA）。它不会重新加载页面，而是通过组件切换实现导航，提升用户体验。
基本使用
- 安装：使用
npm install vue-router@4或 CDN 方式安装。 - 配置：创建路由实例，定义路由规则，例如：
import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
history: createWebHashHistory(),
routes: [{ path: '/', component: Home }]
})- 使用：在模板中用
<router-link to="/">Home</router-link>导航，用<router-view>渲染内容。
高级功能
- 懒加载：用
component: () => import('./views/Home.vue')提高性能。 - 嵌套路由：支持多级路由，如
/user/profile。 - 导航守卫：如
beforeEach检查权限，beforeRouteLeave控制离开。
部署注意事项
历史模式（createWebHistory）需服务器配置（如 Nginx 的 try_files），否则刷新可能出现 404。哈希模式（createWebHashHistory）无需配置，但 URL 包含 #。
详细报告
Vue3 路由（Vue Router）是 Vue.js 的官方路由管理器，专为单页面应用（SPA）设计，通过将 URL 映射到不同的组件，实现无刷新内容切换。它与 Vue3 的组件系统深度集成，支持复杂路由需求，如懒加载、嵌套路由和导航守卫。以下是全面的中文讲解，涵盖基本概念、配置方法、高级功能和部署注意事项。
背景与定义
Vue3 路由的核心目标是让开发者能够通过浏览器 URL 访问不同的内容，而不需重新加载页面。这种方式特别适合现代 Web 应用，提升用户体验和性能。Vue Router 4.x 是 Vue3 的官方版本，与 Vue2 的路由有一定差异，需注意兼容性。
基本使用
安装与初始化
首先，需要安装 vue-router。推荐使用 npm 或 yarn：
npm install vue-router@4- 或使用 Taobao 镜像：
cnpm install vue-router@4。
如果使用 CDN，可以直接引用：https://unpkg.com/vue-router@4。
创建路由实例
使用 createRouter() 创建路由实例，需指定历史模式和路由规则。以下是基本示例：
import { createRouter, createWebHashHistory } 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: createWebHashHistory(),
routes
})history参数支持三种模式：createWebHashHistory()：哈希模式，URL 包含#，如[invalid url, do not cite]createWebHistory()：历史模式，无#，更友好，但需服务器配置。createMemoryHistory()：内存模式，适合服务端渲染。
注册与使用
在主应用中注册路由：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')在模板中使用核心组件：
<router-link to="/">Home</router-link>：创建导航链接，to指定目标路由。<router-view></router-view>：渲染当前路由对应的组件。
<router-link> 支持多种属性，详见下表：
| 属性 | 描述 |
|---|---|
to | 目标路由（字符串或对象，如 { path: '/home' }） |
replace | 使用 router.replace()，不记录历史 |
append | 相对路径添加，如 /a 到 b 变为 /a/b |
tag | 渲染为指定标签（如 <li>），仍触发导航 |
active-class | 激活状态的 CSS 类，默认 router-link-exact-active |
event | 触发导航的事件（如 mouseover） |
高级功能
路由懒加载
为提高性能，可使用动态导入实现懒加载：
const routes = [
{ path: '/', component: () => import('./views/Home.vue') },
{ path: '/about', component: () => import('./views/About.vue') }
]这会在路由访问时才加载对应组件，特别适合大型应用。
嵌套路由
支持多级路由，适合复杂页面结构。例如：
const routes = [
{
path: '/user',
component: () => import('./views/User.vue'),
children: [
{ path: 'profile', component: () => import('./views/UserProfile.vue') },
{ path: 'settings', component: () => import('./views/UserSettings.vue') }
]
}
]在 User.vue 中需包含 <router-view>，以渲染子路由。
路由参数
支持动态路由参数，例如：
const routes = [
{ path: '/user/:id', component: UserDetail }
]在组件中访问参数：
- Options API：
this.$route.params.id - Composition API：
useRoute().params.id
导航守卫
导航守卫用于控制路由跳转，分为全局、路由独享和组件内守卫：
- 全局守卫：
router.beforeEach((to, from, next) => { ... })检查权限。 - 路由独享：
beforeEnter在路由配置中定义。 - 组件内守卫：
beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave。
目录结构与实践
推荐将路由文件放在 src/router 下，常见结构包括：
index.ts：路由入口，创建并导出路由实例。routes.ts：路由配置，可按业务模块拆分（如game.ts，member.ts）。
使用 TypeScript 时，路由配置需使用 RouteRecordRaw 类型，确保类型安全。
部署与注意事项
历史模式 vs 哈希模式
- 历史模式（
createWebHistory）：推荐使用，URL 无#，如[invalid url, do not cite]需服务器配置，否则刷新可能 404。 - 哈希模式（
createWebHashHistory）：URL 包含#，如[invalid url, do not cite]支持所有浏览器，无需服务器配置。
服务器配置
使用历史模式时，需配置服务器。例如 Nginx 配置：
location / {
try_files $uri $uri/ /index.html;
}这确保刷新页面时仍能找到路由。
常见问题
- 刷新 404：历史模式下，服务器未配置
try_files会导致问题。 - 子路由白屏：确保
base路径正确，如/subpath/，或使用绝对路径/。
API 与使用
Vue3 推荐使用 Composition API，访问路由：
useRouter()：获取路由实例，调用push、replace等方法。useRoute()：获取当前路由信息，如route.path、route.params。
在 Options API 中，仍可使用 this.$router 和 this.$route，但不推荐。
参考资源
- 官方文档：Vue Router 中文文档
- 教程：菜鸟教程 – Vue3 路由
- 实战指南：Vue3 路由配置与使用