Vue Router 4 终极速通表

一、Vue Router 4 核心概览

Vue Router 4 是 Vue.js 官方的路由管理器，支持 Vue 3 的组合式 API，提供声明式路由配置、嵌套路由、路由守卫等核心功能，是构建单页应用（SPA）的关键工具。本速通表将系统梳理其核心知识点，并配合可视化图表辅助理解。

二、安装与基础配置

2.1 安装方式

通过 npm 或 yarn 安装 Vue Router 4：

bash

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

2.2 基本配置流程

创建路由实例：通过 createRouter 函数创建，需指定路由模式（history 或 hash）和路由规则数组。
注册路由：在 Vue 应用中通过 app.use(router) 注册。
声明式导航：使用 <router-link> 组件生成导航链接，<router-view> 组件作为路由出口渲染匹配的组件。

基础配置示例：

javascript

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/about', name: 'About', component: About }
]

const router = createRouter({
  history: createWebHistory(),  // HTML5 历史模式
  routes  // 路由规则数组
})

export default router

javascript

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

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

三、路由定义与组件映射

路由规则通过 routes 数组定义，每个路由对象包含 path（路径）、component（对应组件）等核心属性。支持静态路由（固定路径）和动态路由（含参数路径），组件映射可通过直接引入（静态导入）或 () => import()（动态导入，实现代码分割）。

路由定义示例：

javascript

const routes = [
  // 静态路由
  { path: '/', component: () => import('../views/Home.vue') },
  // 动态路由（含参数 :id）
  { path: '/user/:id', component: () => import('../views/User.vue') }
]

四、动态路由匹配

4.1 基本用法

通过路径参数（以 : 开头）匹配动态路径，如 /user/:id 可匹配 /user/1、/user/2 等。参数值可通过 $route.params（选项式 API）或 useRoute().params（组合式 API）获取。

参数获取示例：

javascript

// 选项式 API
export default {
  mounted() {
    console.log(this.$route.params.id)  // 获取动态参数 id
  }
}

// 组合式 API
import { useRoute } from 'vue-router'
export default {
  setup() {
    const route = useRoute()
    console.log(route.params.id)  // 获取动态参数 id
  }
}

4.2 多参数与可选参数

支持多参数（如 /user/:id/post/:postId）和可选参数（参数后加 ?，如 /search/:keyword?），参数变化时可通过 watch 监听 $route 或使用 beforeRouteUpdate 守卫处理。

五、嵌套路由

用于实现页面的层级结构，通过路由对象的 children 属性定义子路由，需在父组件中使用 <router-view> 作为子路由出口。

5.1 嵌套路由配置示例

javascript

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    children: [
      { path: '', component: DashboardHome },  // 默认子路由
      { path: 'analytics', component: Analytics },  // /dashboard/analytics
      { path: 'settings', component: Settings }     // /dashboard/settings
    ]
  }
]

5.2 路由结构可视化

嵌套路由的层级关系可通过以下示意图直观理解，包含一级路由（Home、About、Dashboard）、二级路由（About→History/Team；Dashboard→Analytics/Settings）及三级路由（Team→MemberList/MemberDetail）：

关键说明：

父子路由通过 <router-view> 嵌套渲染，父路由组件需包含 <router-view> 以显示子路由内容。
动态参数（如 :id）可用于三级路由（如 MemberDetail），实现动态数据加载。

六、编程式导航

通过 JavaScript 方法实现路由跳转，替代 <router-link> 的声明式导航，核心方法包括 push、replace、go 等，通过 $router（选项式 API）或 useRouter()（组合式 API）调用。

6.1 常用导航方法

方法	作用	示例
`push`	跳转到指定路径，添加新历史记录	`router.push('/user/1')`
`replace`	跳转到指定路径，替换当前历史记录	`router.replace('/user/1')`
`go`	前进 / 后退指定步数（正数前进，负数后退）	`router.go(-1)`（后退一页）

6.2 带参数的导航

javascript

// 选项式 API
this.$router.push({ name: 'User', params: { id: 1 }, query: { tab: 'profile' } })

// 组合式 API
import { useRouter } from 'vue-router'
const router = useRouter()
router.push({ name: 'User', params: { id: 1 }, query: { tab: 'profile' } })

七、命名路由与命名视图

7.1 命名路由

为路由定义 name 属性，跳转时可通过 name 引用，避免硬编码路径，提高可维护性。

javascript

// 路由定义
{ path: '/user/:id', name: 'User', component: User }

// 跳转方式
router.push({ name: 'User', params: { id: 1 } })  // 推荐，路径变化时无需修改

7.2 命名视图

当一个路径需要同时渲染多个组件（如侧边栏 + 主内容 + 页脚），可使用命名视图，通过 components 属性定义多个组件，<router-view name="xxx"> 指定渲染位置。

javascript

// 路由定义
{
  path: '/dashboard',
  components: {
    default: DashboardMain,  // 默认视图
    sidebar: DashboardSidebar,  // 命名视图 sidebar
    footer: DashboardFooter     // 命名视图 footer
  }
}

html

<!-- 组件中使用 -->
<router-view></router-view>  <!-- 渲染 default 组件 -->
<router-view name="sidebar"></router-view>  <!-- 渲染 sidebar 组件 -->
<router-view name="footer"></router-view>    <!-- 渲染 footer 组件 -->

八、路由守卫

路由守卫用于控制路由导航的权限、执行前置 / 后置逻辑（如登录验证、页面标题修改），分为全局守卫、路由独享守卫和组件内守卫三类，执行顺序严格遵循生命周期流程。

8.1 守卫类型与执行顺序

全局守卫：作用于所有路由，包括 beforeEach（前置）、beforeResolve（解析）、afterEach（后置）。
路由独享守卫：仅作用于特定路由，通过路由对象的 beforeEnter 定义。
组件内守卫：作用于组件内部，包括 beforeRouteEnter（进入前）、beforeRouteUpdate（更新时）、beforeRouteLeave（离开时）。

8.2 执行流程图解

以下流程图展示完整守卫链的执行顺序，不同颜色区分守卫类型（全局守卫绿色、路由独享守卫蓝色、组件内守卫橙色）：

8.3 典型应用场景

登录验证：在 beforeEach 中检查用户是否登录，未登录则重定向到登录页。

javascript

router.beforeEach((to, from, next) => {
  const isLogin = localStorage.getItem('token')
  if (to.meta.requiresAuth && !isLogin) {
    next('/login')  // 未登录，重定向到登录页
  } else {
    next()  // 允许导航
  }
})

页面标题修改：在 afterEach 中根据路由元信息设置页面标题。

九、导航守卫生命周期

导航守卫的执行严格遵循 Vue Router 4 的生命周期流程，从 “导航触发” 到 “DOM 更新” 需经过多个阶段，完整流程如下：

核心阶段解析：

导航触发：用户点击 <router-link> 或调用 router.push。
离开守卫：执行离开组件的 beforeRouteLeave。
全局前置守卫：执行 beforeEach，可拦截导航（如登录验证）。
组件复用守卫：若路由复用（如动态参数变化），执行 beforeRouteUpdate。
路由独享守卫：执行目标路由的 beforeEnter。
解析异步组件：加载目标路由的异步组件（若使用动态导入）。
进入守卫：执行目标组件的 beforeRouteEnter（此时组件实例未创建，需通过回调访问实例）。
全局解析守卫：执行 beforeResolve，所有守卫和异步组件解析完成。
导航确认：路由跳转完成，更新 $route。
全局后置钩子：执行 afterEach，可修改页面标题等。
DOM 更新：触发组件渲染，更新 DOM。
进入守卫回调：执行 beforeRouteEnter 中的 next 回调（此时可访问组件实例）。

十、路由元信息

通过路由对象的 meta 属性定义自定义元数据（如权限要求、页面标题等），可在路由守卫或组件中访问，实现灵活的路由控制。

示例：

javascript

const routes = [
  {
    path: '/admin',
    component: Admin,
    meta: { 
      requiresAuth: true,  // 需要登录
      roles: ['admin']     // 仅管理员可访问
    }
  }
]

// 在守卫中访问元信息
router.beforeEach((to, from) => {
  if (to.meta.requiresAuth && !isLogin()) {
    return { path: '/login' }  // 未登录，重定向到登录页
  }
})

十一、组合式 API 的使用

Vue Router 4 提供专门的组合式 API，支持在 setup 函数或 <script setup> 中使用路由功能，核心 API 包括 useRoute（获取路由信息）和 useRouter（获取路由实例）。

11.1 API 对比

以下图表对比选项式 API 与组合式 API 的核心路由操作差异：

11.2 常用组合式 API 示例

javascript

<script setup>
import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router'

// 获取路由信息（参数、查询等）
const route = useRoute()
console.log(route.params.id)  // 动态参数
console.log(route.query.tab)  // 查询参数

// 获取路由实例（导航方法）
const router = useRouter()
const goToUser = () => {
  router.push(`/user/${route.params.id}`)
}

// 监听路由参数变化（替代 beforeRouteUpdate）
onBeforeRouteUpdate((to, from) => {
  console.log('参数变化：', to.params.id)
})
</script>

十二、历史模式与哈希模式

Vue Router 4 支持两种路由模式，核心区别如下：

特性	哈希模式（`createWebHashHistory`）	历史模式（`createWebHistory`）
URL 格式	`http://example.com/#/user/1`	`http://example.com/user/1`
兼容性	所有浏览器（依赖 URL 哈希）	支持 HTML5 History API 的浏览器
服务器配置	无需特殊配置	需配置服务器（如 Nginx）以支持刷新页面
SEO 友好性	较差（哈希部分不被搜索引擎识别）	较好（正常 URL 结构）

历史模式服务器配置示例（Nginx）：

nginx

location / {
  try_files $uri $uri/ /index.html;  # 将所有请求重定向到 index.html
}

总结

Vue Router 4 是 Vue 3 生态的核心工具，通过声明式路由配置、嵌套路由、动态参数、路由守卫等功能，实现单页应用的灵活导航。结合组合式 API 和元信息，可满足复杂场景下的路由控制需求。本速通表涵盖其核心知识点，并通过可视化图表辅助理解，建议结合实际项目实践加深掌握。