目錄
前言
上一節我們介紹了前端路由和後端路由的概念以及區別,詳見博文:原創 Vue筆記整理,專題之路由:1、路由-前端路由和後端路由的概念 這篇我們將介紹如何安裝理由
安裝
可參考官方文檔:https://router.vuejs.org/zh/installation.html
#直接下載 / CDN
https://unpkg.com/vue-router/dist/vue-router.js
Unpkg.com 提供了基於 NPM 的 CDN 鏈接。上面的鏈接會一直指向在 NPM 發佈的最新版本。你也可以像 https://unpkg.com/[email protected]/dist/vue-router.js
這樣指定 版本號 或者 Tag。
在 Vue 後面加載 vue-router
,它會自動安裝的:
<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>
#NPM
npm install vue-router
如果在一個模塊化工程中使用它,必須要通過 Vue.use()
明確地安裝路由功能:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
如果使用全局的 script 標籤,則無須如此 (手動安裝)。
#構建開發版
如果你想使用最新的開發版,就得從 GitHub 上直接 clone,然後自己 build 一個 vue-router
。
git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
cd node_modules/vue-router
npm install
npm run build
安裝說明
第一種方式:直接下載 / CDN(在網頁裏面直接進行開發)
直接通過地址:https://unpkg.com/vue-router/dist/vue-router.js ,進行下載 vue-router.js 的文件,你把它下載完成以後,它就是路由的一個包,然後我們就可以在頁面代碼裏面,先後引入:
<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>
爲什麼要把 v-router.js 文件的導入放在 vue.js 文件後面呢?
因爲在 vue.js 文件後面導入,之後我們的路由 v-router 就可以向全局的 vue 上面掛載一些相關的屬性了。
第二種方式:NPM(通過webpack這種構建工具來開發)
通過 npm 來安裝
npm install vue-router
那麼安裝以後,怎麼來引用呢?
如果在一個模塊化工程中使用它,必須要通過 Vue.use()
明確地安裝路由功能。
也就是說,如果你的項目是基於模塊化,來進行構建開發的,如:webpack它就是一個前端的模塊化構建工具,用 webpack 就可以進行我們的模塊化開發,那麼如果你用 webpack 進行相關的構建,那我們必須要通過 Vue.use() 手動的去安裝路由功能。如下:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
第一步:導入 vue 模塊
第二步:vue-router 路由模塊
第三步:Vue.use(VueRouter) 也就是相當於:通過 use 方法,把 VueRouter 註冊到 Vue 上面
如果使用全局的 script 標籤,則無須如此 (手動安裝)。
第三種方式:構建開發版
這種方式就不多說了