Vue Router 是 Vue.js 官方的路由管理器，它与 Vue.js 核心深度集成，让构建单页应用变得轻而易举。通过路由，可以在不刷新页面的情况下切换不同的视图，提供流畅的用户体验。
在传统多页应用中，点击链接会跳转到新页面，浏览器会重新加载。而在单页应用（SPA）中，路由负责根据 URL 变化动态渲染对应的组件，无需刷新页面。
/user/profile → UserProfile 组件
/user/settings → UserSettings 组件
/about → About 组件
页面切换无刷新，用户体验流畅：
用户点击链接 → URL 变化 → 路由匹配 → 组件切换
每个视图都有对应的 URL，支持：
路由将应用拆分成独立的视图模块：
├── Home（首页）
├── User（用户）
│ ├── Profile（个人资料）
│ └── Settings（设置）
├── Product（产品）
│ ├── List（列表）
│ └── Detail（详情）
└── NotFound（404）
npm install vue-router@3
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.3/dist/vue-router.js"></script>
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
Vue.use(VueRouter)
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
const router = new VueRouter({
mode: 'history',
routes
})
new Vue({
router,
render: h => h(App)
}).$mount('#app')
<template>
<div>
<nav>
<router-link to="/">首页</router-link>
<router-link to="/about">关于</router-link>
</nav>
<router-view></router-view>
</div>
</template>
声明式导航，渲染为 <a> 标签：
<router-link to="/">首页</router-link>
<router-link to="/about">关于</router-link>
<router-link to="/user" tag="button">用户</router-link>
<router-link to="/user" replace>用户</router-link>
<router-link :to="{ name: 'user', params: { id: 123 } }">用户详情</router-link>
路由出口，匹配的组件在这里渲染：
<router-view></router-view>
<router-view class="view"></router-view>
<transition name="fade">
<router-view></router-view>
</transition>
const routes = [
{
path: '/',
name: 'home',
component: Home,
meta: { requiresAuth: false }
},
{
path: '/user/:id',
name: 'user',
component: User,
props: true
},
{
path: '*',
component: NotFound
}
]
使用 URL 的 hash 模拟完整 URL：
http://example.com/#/user
const router = new VueRouter({
routes
})
使用 HTML5 History API，URL 更美观：
http://example.com/user
const router = new VueRouter({
mode: 'history',
routes
})
history 模式需要服务器配置
所有路径都需要返回 index.html，否则刷新会 404。
Nginx 配置：
location / {
try_files $uri $uri/ /index.html;
}
URL 变化
↓
路由匹配
↓
组件渲染
↓
生命周期触发
↓
数据加载
理解这个流程，是掌握 Vue Router 的关键。
按需加载组件，优化首屏性能：
const routes = [
{
path: '/about',
component: () => import('./views/About.vue')
},
{
path: '/user',
component: () => import(/* webpackChunkName: "user" */ './views/User.vue')
}
]
学习 Vue Router 的步骤：