企业官网建设流程全解析

• 前端
• 路由

Vue Router 是 Vue 2 的官方路由库（当前仓库版本为 3.6.5，对应 Vue.js 2 生态）。本文以仓库官方安装文档为核心，系统讲解四种主流安装与引入方式——CDN 直接下载、npm 模块化安装、Vue CLI 插件生成、源码开发版构建——并结合仓库源码（如 src/install.js、src/router.js、examples/basic/app.js）深入剖析Vue.use()的安装原理、全局组件注册与$router/$route注入机制。读完本文，你将掌握在不同项目形态（纯 HTML 页面、webpack 工程、CLI 脚手架、源码贡献场景）下正确安装并验证 Vue Router 的完整技能。

安装方式总览

仓库官方文档 docs/installation.md（以及对应的日文版 docs/ja/installation.md、docs/zh 等翻译版）共给出四条安装路径，适用场景各不相同：

直接下载 / CDN：script 标签引入即用

CDN 地址与版本固定

官方文档给出的 CDN 入口为 unpkg（npm 包的 CDN 服务）：

https://unpkg.com/vue-router@3/dist/vue-router.js

• 上述不带版本号的 URL 始终指向 npm 上的最新发布版本；
• 如需固定版本或 tag，可写成形如https://unpkg.com/vue-router@3.0.0/dist/vue-router.js的 URL，避免后续升级带来行为变化。

从仓库 package.json 可以看到，unpkg字段声明了dist/vue-router.js作为 CDN 入口文件（jsdelivr字段同样指向该文件），这正是 CDN 方式所加载的完整 UMD 构建产物。

引入顺序与自动安装

在<script>标签中，将vue-router放在 Vue 之后引入即可，无需任何额外初始化代码：

<script src="/path/to/vue.js"></script> <script src="/path/to/vue-router.js"></script>

之所以能“自动安装”，是因为 UMD 构建在加载时会检测全局Vue是否存在，存在则直接调用install。这种全局 script 标签场景下不需要手动调用Vue.use(VueRouter)——这正是文档中“グローバルな script タグを使っている場合は必要ありません”（使用全局 script 标签时无需此步骤）的含义。

npm 安装与模块化引入

安装命令

在项目根目录执行：

npm install vue-router

安装后，仓库 package.json 中main（dist/vue-router.common.js）与module（dist/vue-router.esm.js）字段决定了 CommonJS 与 ES Module 两种解析路径，exports字段则面向 Node 新版本分别提供require/import对应的构建产物，同时暴露./composables子路径（Vue 2.7 组合式 API 支持，见 composables.js）与类型声明。

模块系统必须显式安装

使用模块系统（ES Module / CommonJS）时，必须通过Vue.use()显式安装路由插件：

import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)

Vue.use() 背后发生了什么

Vue.use()会调用插件暴露的install方法。仓库中的实现位于 src/install.js，它完成四件关键事情：

1. 幂等保护：install.installed && _Vue === Vue时直接返回，确保同一 Vue 版本下不会重复安装；
2. 全局混入路由初始化：通过Vue.mixin({ beforeCreate })，在每个组件创建时判断$options.router是否存在——根实例存在则调用this._router.init(this)并把_route设为响应式（Vue.util.defineReactive），子组件则向上继承_routerRoot；
3. 注入全局属性：通过Object.defineProperty(Vue.prototype, ...)为所有组件实例挂载$router（指向根实例的_router）与$route（指向响应式的_route），这也是模板里能直接使用$router.push()、$route.params的原因；
4. 注册全局组件与合并策略：注册RouterView与RouterLink两个全局组件（源码见 src/components/view.js、src/components/link.js），并把beforeRouteEnter/beforeRouteLeave/beforeRouteUpdate三个路由守卫钩子接入 Vue 的选项合并策略strats。

此外，src/router.js 中init方法会校验安装状态：

not installed. Make sure to call `Vue.use(VueRouter)` before creating root instance.

即必须在创建根实例之前调用Vue.use(VueRouter)，否则运行时会直接断言报错。这也解释了为何文档强调模块化场景下不能省略这一步。

Vue CLI 插件方式：一行命令生成路由骨架

如果项目使用 Vue CLI 脚手架，可以直接以插件方式接入：

vue add router

执行该命令后，CLI 会代为完成上面所有安装与初始化代码的生成，并创建两个示例路由。需要特别注意的是，文档明确警告：该命令会覆盖项目中的App.vue（英文原文 "It will also overwrite yourApp.vue"）。因此在运行命令前务必先备份App.vue，避免丢失已有页面结构与样式。

开发版构建：从源码编译最新版本

如果希望使用尚未发布到 npm 的最新开发版功能，或需要深入源码调试，可克隆本仓库并自行构建。

克隆仓库

本仓库为 GitHub 镜像仓库，克隆地址为：

https://gitcode.com/gh_mirrors/vu/vue-router

安装依赖并构建

克隆完成后，在仓库目录内依次执行：

npm install npm run build

其中npm run build在 package.json 的scripts中定义，会产出dist/下的多套构建产物（UMD / CommonJS / ESM 等），与 npm 发布包中的文件保持一致。构建完成后，即可将产物作为本地依赖引入自己的项目，或直接阅读 src 目录源码进行二次开发。

快速验证：四步跑通最小路由示例

仓库 examples/basic/app.js 给出了一个标准的最小可用示例，恰好对应官方文档“安装 → 引入 → 使用”的完整链路：

import Vue from 'vue' import VueRouter from 'vue-router' // 1. 安装插件：注册 <router-view> 与 <router-link>， // 并向所有路由相关组件注入 $router 与 $route Vue.use(VueRouter) // 2. 定义路由组件 const Home = { template: '<div>home</div>' } const Foo = { template: '<div>foo</div>' } // 3. 创建路由器实例 const router = new VueRouter({ mode: 'history', // 也可省略，默认 hash 模式 routes: [ { path: '/', component: Home }, { path: '/foo', component: Foo } ] }) // 4. 创建并挂载根实例，务必注入 router new Vue({ router, template: ` <div id="app"> <router-link to="/">/</router-link> <router-link to="/foo">/foo</router-link> <router-view></router-view> </div> ` }).$mount('#app')

若页面正常渲染导航链接与路由内容，说明安装与引入已成功。仓库中 examples 目录还提供了hash-mode、nested-routes、navigation-guards等二十余个可直接运行场景（启动方式见npm run dev，由 examples/server.js 提供本地服务）。

常见问题与注意事项

• 引入顺序：CDN 方式必须保证vue-router在vue.js之后加载，否则无法自动安装；模块化方式则必须在使用前调用Vue.use(VueRouter)，且该调用要在new Vue()之前完成。
• 版本匹配：本仓库是 Vue 2 的官方路由（package.json中描述为 "Official router for Vue.js 2"，当前版本 3.6.5），配套 Vue 2.x 使用；不同主版本的 API 存在差异，安装时请确认与项目 Vue 版本一致。
• 模式与回退：src/router.js 的构造函数显示，mode默认为hash；指定history模式但浏览器不支持pushState时，会自动回退到hash（fallback逻辑）；在非浏览器环境（如 SSR）下自动切换为abstract模式。
• 备份 App.vue：使用vue add router前务必备份，该命令会覆盖根组件文件。
• 开发版风险：源码构建的产物未经发布流程验证，仅建议在需要新功能或调试源码时使用，生产环境优先使用 npm 正式版本。

• 前端
• 路由