一文看懂 Vue Router：精简、易懂、直接用

Vue Router 是 Vue.js 的官方路由管理器。它和 Vue 深度集成，让构建单页面应用(SPA)变得非常直观。核心任务只有一件：让 URL 与页面组件对应起来，切换时不刷新整个页面。

前言

Vue Router 的精髓就在"映射关系 "和"切换控制"。理解清楚路径、组件、占位符三个角色之间的配合，就能解决绝大多数路由需求。更复杂的玩法（过渡动效、滚动行为、路由懒加载的魔法注释）都可以在上述基础上自然延伸。

1. 极简模型

你可以把路由想象成一个"遥控器"：

地址栏 -- 遥控器按下的数字
路由配置 -- 频道表（哪个数字对应哪个台）
<router-view> -- 电视屏幕，负责显示当前频道的内容
<router-link> -- 换台按钮，点击后切换频道且不关电视

2. 快速上手（以 Vue 3 + Vue Router 4 为例）

安装

bash 复制代码

npm install vue-router@4
或 
yarn add vue-router@4

定义路由表 （router/index.js）

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 实例中注入

js 复制代码

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

在模板中使用

html 复制代码

<template>
  <nav>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>
  </nav>
  <router-view />  <!-- 匹配到的组件会渲染在这里 -->
</template>

3. 核心概念速览

动态路由

把同一类页面用一个路由表示，变化的参数用冒号 : 标记。

js 复制代码

{ path: '/user/:id', component: User }

在组件内，通过 $route.params.id 拿到 id 值，可以据此请求不同数据。

嵌套路由（子路由）

用 children 让组件内部也拥有自己的 <router-view>。

js 复制代码

{
  path: '/user/:id',
  component: User,
  children: [
    { path: 'profile', component: UserProfile },
    { path: 'posts', component: UserPosts }
  ]
}

访问 /user/1/profile 时，User 组件内部会展示 UserProfile。

编程式导航

不用 <router-link>，直接用 JS 跳转。

js 复制代码

// 字符串路径
router.push('/about')

// 带参数的对象
router.push({ name: 'user', params: { id: 123 } })

// 替换历史记录，不回退
router.replace('/home')

导航守卫（拦截器）

在跳转前后执行逻辑，最常见的是检查登录状态。

js 复制代码

// 全局前置守卫：所有跳转前都会走这里
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isLoggedIn()) {
    next('/login') // 没登录就去登录页
  } else {
    next() // 正常放行
  }
})

to：要去哪
from：从哪来
next：放行函数

路由懒加载（性能关键）

把不同页面的代码拆成独立文件，用户访问时才加载，加快首屏。

js 复制代码

// 不用 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。

------个人观点 · 仅供参考------