版構建全解析)
vue-router 3.x 安裝指南CDN、NPM、Vue CLI 插件與開發(fā)版構建全解析【免費下載鏈接】vue-router The official router for Vue 2項目地址: https://gitcode.com/gh_mirrors/vu/vue-router導讀本文以 Vue 2 官方路由管理器 vue-router 的安裝文檔docs/zh/installation.md為主線系統(tǒng)講解四種獲取與接入 vue-router 的方式直接下載 / CDN 引入、NPM 包管理、Vue CLI 插件化添加以及從源碼構建開發(fā)版。讀完本文你將掌握每種方式的使用場景、操作步驟與注意事項并能結合倉庫源碼src/install.js、package.json理解Vue.use()自動安裝機制的底層原理為后續(xù)編寫路由配置、守衛(wèi)與動態(tài)匹配打好基礎。vue-router 是 Vue.js 2 的官方路由管理器與 Vue 核心深度集成支持嵌套路由、路由參數(shù)、導航守衛(wèi)、HTML5 history / hash 兩種模式等能力。當前倉庫對應 vue-router 3.6.5 版本見 package.json下文所有命令與產(chǎn)物均以該版本為準。一、直接下載 / CDN 引入1.1 獲取最新版或指定版本vue-router 官方文檔提供基于 NPM 的 CDN 鏈接https://unpkg.com/vue-router3/dist/vue-router.js上面的鏈接會始終指向 NPM 上發(fā)布的最新版本適合快速體驗生產(chǎn)環(huán)境更推薦鎖定版本號或 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 構建產(chǎn)物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等產(chǎn)物分別面向 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 會自動安裝在瀏覽器全局環(huán)境中UMD 構建會調用install完成注冊無需額外調用Vue.use()。從源碼看這個自動安裝的入口位于 src/index.js 與 src/entries/cjs.jssrc/index.js引入./entries/cjs并默認導出VueRouter而 UMD 構建產(chǎn)物在瀏覽器中執(zhí)行時會通過VueRouter.install掛載到全局 Vue。核心的install函數(shù)定義在 src/install.js它負責注冊全局混入beforeCreate中初始化_routerRoot與_route、在Vue.prototype上注入$router/$route屬性、全局注冊RouterLink/RouterView兩個組件并將路由守衛(wèi)鉤子的選項合并策略與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 的項目可執(zhí)行等價的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 構造函數(shù)只安裝一次而 src/router.js 中init方法也專門斷言了install.installed若未先執(zhí)行Vue.use(VueRouter)就創(chuàng)建根實例會得到 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)及路由實例創(chuàng)建代碼生成兩個示例路由通常是一個首頁與一個 About 頁面供參考自動在main.js中接入路由實例。重要警告vue add router會覆蓋你現(xiàn)有的App.vue以及可能調整main.js等文件因此在項目中執(zhí)行該命令之前請務必先備份這些文件。建議在 Git 工作區(qū)中確認當前改動已提交或手動復制一份App.vue留存。四、構建開發(fā)版使用最新源碼如果你需要使用尚未發(fā)布到 NPM 的最新開發(fā)版需要從 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無需改動即可直接解析到本地源碼構建產(chǎn)物適合在本地方案中先行驗證新功能。npm install安裝全部開發(fā)依賴Rollup、Babel、Flow、Jasmine、Nightwatch 等見 package.json。npm run build對應腳本node build/build.jspackage.json會借助 Rollup 打包出dist/下的全部產(chǎn)物UMD、ESM、CommonJS、壓縮版等供不同場景消費。構建完成后可運行npm run devnode examples/server.js啟動本地示例服務器倉庫 examples 目錄提供了從基本路由、嵌套路由到導航守衛(wèi)、數(shù)據(jù)獲取等大量可直接運行的示例。若想跑完整測試可執(zhí)行npm test依次執(zhí)行 lint、Flow 類型檢查、Jasmine 單元測試、Nightwatch 端到端測試與 TypeScript 類型測試其中單元測試用例位于 test/unit/specs例如 node.spec.js 專門覆蓋服務端 / 非瀏覽器環(huán)境下的安裝與使用。五、四種方式的選型建議方式適用場景安裝/引入方式是否需要Vue.use()CDN / 直接下載快速原型、靜態(tài)頁、無構建工具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 的起步與動態(tài)路由匹配章節(jié)繼續(xù)完成路由表定義與router-link/router-view的組裝即可運行第一個多頁面 SPA。【免費下載鏈接】vue-router The official router for Vue 2項目地址: https://gitcode.com/gh_mirrors/vu/vue-router創(chuàng)作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考 vue-router 3.x 安裝指南：CDN、NPM、Vue CLI 插件與開發(fā)版構建全解析
vue-router 3.x 安裝指南CDN、NPM、Vue CLI 插件與開發(fā)版構建全解析【免費下載鏈接】vue-router The official router for Vue 2項目地址: https://gitcode.com/gh_mirrors/vu/vue-router導讀本文以 Vue 2 官方路由管理器 vue-router 的安裝文檔docs/zh/installation.md為主線系統(tǒng)講解四種獲取與接入 vue-router 的方式直接下載 / CDN 引入、NPM 包管理、Vue CLI 插件化添加以及從源碼構建開發(fā)版。讀完本文你將掌握每種方式的使用場景、操作步驟與注意事項并能結合倉庫源碼src/install.js、package.json理解Vue.use()自動安裝機制的底層原理為后續(xù)編寫路由配置、守衛(wèi)與動態(tài)匹配打好基礎。vue-router 是 Vue.js 2 的官方路由管理器與 Vue 核心深度集成支持嵌套路由、路由參數(shù)、導航守衛(wèi)、HTML5 history / hash 兩種模式等能力。當前倉庫對應 vue-router 3.6.5 版本見 package.json下文所有命令與產(chǎn)物均以該版本為準。一、直接下載 / CDN 引入1.1 獲取最新版或指定版本vue-router 官方文檔提供基于 NPM 的 CDN 鏈接https://unpkg.com/vue-router3/dist/vue-router.js上面的鏈接會始終指向 NPM 上發(fā)布的最新版本適合快速體驗生產(chǎn)環(huán)境更推薦鎖定版本號或 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 構建產(chǎn)物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等產(chǎn)物分別面向 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 會自動安裝在瀏覽器全局環(huán)境中UMD 構建會調用install完成注冊無需額外調用Vue.use()。從源碼看這個自動安裝的入口位于 src/index.js 與 src/entries/cjs.jssrc/index.js引入./entries/cjs并默認導出VueRouter而 UMD 構建產(chǎn)物在瀏覽器中執(zhí)行時會通過VueRouter.install掛載到全局 Vue。核心的install函數(shù)定義在 src/install.js它負責注冊全局混入beforeCreate中初始化_routerRoot與_route、在Vue.prototype上注入$router/$route屬性、全局注冊RouterLink/RouterView兩個組件并將路由守衛(wèi)鉤子的選項合并策略與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 的項目可執(zhí)行等價的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 構造函數(shù)只安裝一次而 src/router.js 中init方法也專門斷言了install.installed若未先執(zhí)行Vue.use(VueRouter)就創(chuàng)建根實例會得到 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)及路由實例創(chuàng)建代碼生成兩個示例路由通常是一個首頁與一個 About 頁面供參考自動在main.js中接入路由實例。重要警告vue add router會覆蓋你現(xiàn)有的App.vue以及可能調整main.js等文件因此在項目中執(zhí)行該命令之前請務必先備份這些文件。建議在 Git 工作區(qū)中確認當前改動已提交或手動復制一份App.vue留存。四、構建開發(fā)版使用最新源碼如果你需要使用尚未發(fā)布到 NPM 的最新開發(fā)版需要從 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無需改動即可直接解析到本地源碼構建產(chǎn)物適合在本地方案中先行驗證新功能。npm install安裝全部開發(fā)依賴Rollup、Babel、Flow、Jasmine、Nightwatch 等見 package.json。npm run build對應腳本node build/build.jspackage.json會借助 Rollup 打包出dist/下的全部產(chǎn)物UMD、ESM、CommonJS、壓縮版等供不同場景消費。構建完成后可運行npm run devnode examples/server.js啟動本地示例服務器倉庫 examples 目錄提供了從基本路由、嵌套路由到導航守衛(wèi)、數(shù)據(jù)獲取等大量可直接運行的示例。若想跑完整測試可執(zhí)行npm test依次執(zhí)行 lint、Flow 類型檢查、Jasmine 單元測試、Nightwatch 端到端測試與 TypeScript 類型測試其中單元測試用例位于 test/unit/specs例如 node.spec.js 專門覆蓋服務端 / 非瀏覽器環(huán)境下的安裝與使用。五、四種方式的選型建議方式適用場景安裝/引入方式是否需要Vue.use()CDN / 直接下載快速原型、靜態(tài)頁、無構建工具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 的起步與動態(tài)路由匹配章節(jié)繼續(xù)完成路由表定義與router-link/router-view的組裝即可運行第一個多頁面 SPA。【免費下載鏈接】vue-router The official router for Vue 2項目地址: https://gitcode.com/gh_mirrors/vu/vue-router創(chuàng)作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考