Vue Router 官方文档

Vue Router 是 Vue.js 生态中的官方路由库，与 Vue 核心深度集成，为单页应用提供从 URL 到组件视图的精确绑定，同时支持 HTML5、hash 和记忆三种历史模式。

核心能力

Vue Router 通过 createRouter() 函数创建路由器实例，routes 选项将 URL 路径映射到 Vue 组件，RouterView 组件指定渲染位置，RouterLink 组件实现无刷新导航。支持动态路由匹配、嵌套路由、命名视图、重定向与别名、路由组件传参等基础功能，并提供导航守卫、路由元信息、数据获取、滚动行为、路由懒加载等进阶特性。

• 路由语法: 支持静态与动态路由定义，可直接在代码中使用 unicode 字符（如中文路径）
• 导航控制: 可拦截任意导航并精确控制结果，包括导航故障处理
• 历史模式: 提供 createWebHistory（HTML5）、createWebHashHistory（hash）、createMemoryHistory（记忆）三种选择
• 滚动控制: 支持为每个页面独立配置滚动位置
• 自动编码: 内置 URL 编码处理，无需手动转义特殊字符

上手方式

官方文档提供完整的入门指南，从安装、创建路由器实例到注册插件均有代码示例。用户可通过 Vue 演练场在线体验基础用法，也可观看免费的 Vue Router 视频课程（英文）。文档同时提供 Cheat Sheet 速查表（来自 Vue Mastery）。

• 安装: 通过 npm/yarn 安装 vue-router 包，调用 createRouter() 并传入 routes 和 history 选项
• 注册插件: 在应用实例上调用 app.use(router) 后挂载，全局注册 RouterView 和 RouterLink 组件
• 模板使用: 通过 $route 对象访问当前路由信息（如 fullPath），使用 RouterLink 创建链接、RouterView 渲染组件

版本与兼容

当前主版本为 v4.x/v5.x（对应 Vue 3），同时保留 v3.x 文档（对应 Vue 2）。TypeScript 用户需注意 vue-router@3.0+ 依赖 vue@2.5+。文档提供从 Vue 2 迁移的专门指南，并支持基于文件的路由配置（需额外配置）。

• 多版本支持: 官网导航栏可切换 v4.x/v5.x 与 v3.x 文档
• 迁移指南: 专门章节指导从 Vue 2 项目迁移至 Vue 3 路由系统
• 类型化路由: 支持通过 TypeScript 定义路由类型，增强类型安全
• ESLint 支持: 提供路由相关 ESLint 插件配置

常见问题

Q1：Vue Router 如何实现路由懒加载？

A1：在 routes 配置中，将 component 选项改为动态 import() 函数即可，例如 component: () => import('./views/About.vue')。Vue Router 会自动按需加载对应组件代码，减少首屏包体积。

Q2：Vue Router 的导航守卫有哪些类型？

A2：分为全局守卫（beforeEach、beforeResolve、afterEach）、路由独享守卫（beforeEnter）和组件内守卫（beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave）。可精确控制导航的进入、更新和离开过程。

Q3：Vue Router 支持哪些历史记录模式？各自适用场景？

A3：支持三种模式：createWebHistory（HTML5 History API，需要服务器配置支持）、createWebHashHistory（URL 带 #，兼容性好，无需服务器配置）、createMemoryHistory（完全忽略浏览器 URL，适用于测试或非浏览器环境）。

更多同类工具与网站,可在Vue分类继续挑选。

信息核实于 2026年7月,具体以官网为准。