Vue Router 是 Vue.js 的官方路由管理器。它和 Vue 深度集成，让构建单页面应用(SPA)变得非常直观。核心任务只有一件：
让 URL 与页面组件对应起来，切换时不刷新整个页面。
前言
Vue Router 的精髓就在“映射关系”和“切换控制”。理解清楚路径、组件、占位符三个角色之间的配合，就能解决绝大多数路由需求。更复杂的玩法（过渡动效、滚动行为、路由懒加载的魔法注释）都可以在上述基础上自然延伸。
1. 极简模型
你可以把路由想象成一个“遥控器”：
- 地址栏 – 遥控器按下的数字
- 路由配置 – 频道表（哪个数字对应哪个台）
<router-view>– 电视屏幕，负责显示当前频道的内容<router-link>– 换台按钮，点击后切换频道且不关电视
2. 快速上手（以 Vue 3 + Vue Router 4 为例）
安装
npm install vue-router@4
或
yarn add vue-router@4
定义路由表（router/index.js）
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(), // 使用 HTML5 历史模式，干净的URL
routes
})
export default router
在 Vue 实例中注入
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
在模板中使用
<template>
<nav>
<router-link to="/">首页</router-link>
<router-link to="/about">关于</router-link>
</nav>
<router-view /> <!-- 匹配到的组件会渲染在这里 -->
</template>
3. 核心概念速览
动态路由
把同一类页面用一个路由表示，变化的参数用冒号 : 标记。
{ path: '/user/:id', component: User }
在组件内，通过 $route.params.id 拿到 id 值，可以据此请求不同数据。
嵌套路由（子路由）
用 children 让组件内部也拥有自己的 <router-view>。
{
path: '/user/:id',
component: User,
children: [
{ path: 'profile', component: UserProfile },
{ path: 'posts', component: UserPosts }
]
}
访问 /user/1/profile 时，User 组件内部会展示 UserProfile。
编程式导航
不用 <router-link>，直接用 JS 跳转。
// 字符串路径
router.push('/about')
// 带参数的对象
router.push({ name: 'user', params: { id: 123 } })
// 替换历史记录，不回退
router.replace('/home')
导航守卫（拦截器）
在跳转前后执行逻辑，最常见的是检查登录状态。
// 全局前置守卫：所有跳转前都会走这里
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isLoggedIn()) {
next('/login') // 没登录就去登录页
} else {
next() // 正常放行
}
})
to：要去哪from：从哪来next：放行函数
路由懒加载（性能关键）
把不同页面的代码拆成独立文件，用户访问时才加载，加快首屏。
// 不用 import 在上面，而用动态 import
const About = () => import('../views/About.vue')
const User = () => import('../views/User.vue')
4. 两种历史模式怎么选
| 模式 | URL 样子 | 优缺点 |
|---|---|---|
createWebHistory | https://xxx.com/user/id | 漂亮，但需服务器配置（Nginx 等把请求回退到 index.html） |
createWebHashHistory | https://xxx.com/#/user/id | 有 #，但无需服务器配置，纯前端兼容性好 |
一般正式上线推荐用 WebHistory，并配好服务器的 fallback。
5. 实用小抄
- 路由元信息
{ path: '/admin', meta: { requiresAuth: true } }，配合守卫做权限。
- 404 页面
{ path: '/:pathMatch(.*)*', component: NotFound }放在路由表最后。
- 路由传参解耦
在路由配置中开启
props: true，组件可通过props接收params，不再依赖$route，可复用性更强。
- 命名视图
一个页面需要同时展示多个同级视图时，用
components（复数）代替component，并指定name。
——个人观点 · 仅供参考——
