vue-router 3.x 安装指南CDN、NPM、Vue CLI 插件与开发版构建全解析【免费下载链接】vue-router The official router for Vue 2项目地址: https://gitcode.com/gh_mirrors/vu/vue-router导读本文以 Vue 2 官方路由管理器 vue-router 的安装文档docs/zh/installation.md为主线系统讲解四种获取与接入 vue-router 的方式直接下载 / CDN 引入、NPM 包管理、Vue CLI 插件化添加以及从源码构建开发版。读完本文你将掌握每种方式的使用场景、操作步骤与注意事项并能结合仓库源码src/install.js、package.json理解Vue.use()自动安装机制的底层原理为后续编写路由配置、守卫与动态匹配打好基础。vue-router 是 Vue.js 2 的官方路由管理器与 Vue 核心深度集成支持嵌套路由、路由参数、导航守卫、HTML5 history / hash 两种模式等能力。当前仓库对应 vue-router 3.6.5 版本见 package.json下文所有命令与产物均以该版本为准。一、直接下载 / CDN 引入1.1 获取最新版或指定版本vue-router 官方文档提供基于 NPM 的 CDN 链接https://unpkg.com/vue-router3/dist/vue-router.js上面的链接会始终指向 NPM 上发布的最新版本适合快速体验生产环境更推荐锁定版本号或 Tag避免 CDN 内容意外变更https://unpkg.com/vue-router3.6.5/dist/vue-router.js也可以使用3.0.0这类早期版本号。从当前仓库 package.json 的unpkg与jsdelivr字段可以看出dist/vue-router.js正是为 CDN 场景准备的 UMD 构建产物main: dist/vue-router.common.js, module: dist/vue-router.esm.js, unpkg: dist/vue-router.js, jsdelivr: dist/vue-router.js仓库根目录的dist/目录中实际存在vue-router.js、vue-router.min.js、vue-router.esm.js、vue-router.esm.browser.js、vue-router.common.js与vue-router.mjs等产物分别面向 script 标签、浏览器原生 ESM、打包工具 CommonJS 与 Node ESM 等不同消费场景。1.2 在 Vue 之后加载自动安装用script标签引入时必须先加载 Vue再加载 vue-routerscript src/path/to/vue.js/script script src/path/to/vue-router.js/script只要保证加载顺序正确vue-router 会自动安装在浏览器全局环境中UMD 构建会调用install完成注册无需额外调用Vue.use()。从源码看这个自动安装的入口位于 src/index.js 与 src/entries/cjs.jssrc/index.js引入./entries/cjs并默认导出VueRouter而 UMD 构建产物在浏览器中执行时会通过VueRouter.install挂载到全局 Vue。核心的install函数定义在 src/install.js它负责注册全局混入beforeCreate中初始化_routerRoot与_route、在Vue.prototype上注入$router/$route属性、全局注册RouterLink/RouterView两个组件并将路由守卫钩子的选项合并策略与created对齐。1.3 手动在模块化工程中引入如果使用 NPM 包但不走打包工具也可以手动引入 ESM 版本并自行安装import Vue from vue import VueRouter from vue-router Vue.use(VueRouter)二、NPM 安装与Vue.use()显式安装2.1 安装命令npm install vue-router仓库当前版本为 3.6.5对应 Vue 2.x。如果你使用的是 npm 5package-lock.json会锁定精确版本使用 yarn 的项目可执行等价的yarn add vue-router。2.2 为什么模块化工程必须Vue.use()与 CDN 的自动安装不同在模块化工程Webpack / Rollup 等中必须通过Vue.use()显式安装路由功能import Vue from vue import VueRouter from vue-router Vue.use(VueRouter)原因在于打包工具将 vue-router 作为普通 ES Module 引入后它并不会自动感知宿主 Vue 实例install必须被显式调用。Vue.use()会调用插件暴露的install方法并保证同一插件只安装一次。结合源码印证src/install.js 的安装逻辑为export function install (Vue) { if (install.installed _Vue Vue) return install.installed true _Vue Vue // ... 全局混入、$router/$route 注入、组件注册 }其中install.installed用于幂等保护——同一 Vue 构造函数只安装一次而 src/router.js 中init方法也专门断言了install.installed若未先执行Vue.use(VueRouter)就创建根实例会得到 not installed. Make sure to callVue.use(VueRouter)before creating root instance. 的警告。安装完成后需要把VueRouter实例传入根 Vue 实例const router new VueRouter({ routes: [ { path: /, component: Home } ] }) new Vue({ router, render: h h(App) }).$mount(#app)2.3 ESM 与命名导出当前仓库还通过exports字段package.json暴露了子路径vue-router/composables对应 composables.mjs其中提供了useRouter、useRoute、useLink、onBeforeRouteUpdate、onBeforeRouteLeave等组合式 API供在 Vue 2.7 Composition API 场景下使用。此外ESM 入口 src/entries/esm.js 还导出了version、isNavigationFailure、NavigationFailureType、START_LOCATION以及RouterLink/RouterView组件。三、通过 Vue CLI 插件添加如果你正在使用 Vue CLI 项目可以以项目插件的形式添加 Vue Routervue add router该命令会帮你自动生成Vue.use(VueRouter)及路由实例创建代码生成两个示例路由通常是一个首页与一个 About 页面供参考自动在main.js中接入路由实例。重要警告vue add router会覆盖你现有的App.vue以及可能调整main.js等文件因此在项目中执行该命令之前请务必先备份这些文件。建议在 Git 工作区中确认当前改动已提交或手动复制一份App.vue留存。四、构建开发版使用最新源码如果你需要使用尚未发布到 NPM 的最新开发版需要从 GitHub 克隆仓库并自行构建git clone https://github.com/vuejs/vue-router.git node_modules/vue-router cd node_modules/vue-router npm install npm run build几点说明克隆到node_modules/vue-router目录后项目中已有的import VueRouter from vue-router无需改动即可直接解析到本地源码构建产物适合在本地方案中先行验证新功能。npm install安装全部开发依赖Rollup、Babel、Flow、Jasmine、Nightwatch 等见 package.json。npm run build对应脚本node build/build.jspackage.json会借助 Rollup 打包出dist/下的全部产物UMD、ESM、CommonJS、压缩版等供不同场景消费。构建完成后可运行npm run devnode examples/server.js启动本地示例服务器仓库 examples 目录提供了从基本路由、嵌套路由到导航守卫、数据获取等大量可直接运行的示例。若想跑完整测试可执行npm test依次执行 lint、Flow 类型检查、Jasmine 单元测试、Nightwatch 端到端测试与 TypeScript 类型测试其中单元测试用例位于 test/unit/specs例如 node.spec.js 专门覆盖服务端 / 非浏览器环境下的安装与使用。五、四种方式的选型建议方式适用场景安装/引入方式是否需要Vue.use()CDN / 直接下载快速原型、静态页、无构建工具script标签不需要自动安装NPM模块化工程Webpack/Rollup/Vue CLI 等npm install vue-router必须显式调用Vue CLI 插件已有 Vue CLI 项目vue add routerCLI 自动生成源码构建尝鲜最新 dev 版、贡献代码clone npm run build按 NPM 方式使用无论采用哪种方式接入后建议从仓库文档 docs/zh/guide/essentials 的起步与动态路由匹配章节继续完成路由表定义与router-link/router-view的组装即可运行第一个多页面 SPA。【免费下载链接】vue-router The official router for Vue 2项目地址: https://gitcode.com/gh_mirrors/vu/vue-router创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考