又一周過去了，時間過得很快，更新不能落下，繼續我們的vue2.0進階教程。今天前端君來跟大家一起快速入門vue-router。

?

學一個新東西之前，我們一定先要學會問：它有什么作用，為什么要學它？

?

對于SPA ( single pageapplication 單頁面應用)，尤其是做移動端的網頁應用，由于使用?<a/> 標簽實現頁面的切換和跳轉，會有一定的加載時間消耗，經常遇到這樣的畫面：

網速慢一點的時候，就一直在加載，嚴重影響產品的用戶體驗，這也是（html5）移動端網頁應用在使用流暢度干不過原生app的地方之一。

所以常用的做法將網頁應用做成一個SPA單頁面應用，用視圖切換（隱藏和顯示）來模擬頁面的切換。而但你的項目使用了vue進行開發，那么在實現視圖切換的時候，你就可以借助vue-router來幫助你方便地實現視圖切換。

?

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構建SPA單頁面應用。vue的單頁面應用是基于路由和組件的，相當于傳統頁面是基于?<a/>?標簽鏈接和頁面，路由用于設定訪問路徑，并將路徑和組件映射起來，這樣就可以實現通過路由router來切換組件（視圖）。

?

看著介紹是懂非懂，我們還是來動手實現一遍，才會理解更深刻。下面就跟著前端君來一步一步實現用vue-router來切換視圖。

?

第1步：安裝vue-router

創建一個頁面，安裝引入vue.js和vue-router.js。

你可以使用：直接下載/CND或者NPM進行安裝，我們這里用最簡單的方式安裝：把文件都下載到本地，直接引入。

?

? <script src="js/vue2.0.js"></script>
? <script src="js/vue-router.js"></script>

?

另外附上CND的地址，需要下載vue-router到本地的同學可以訪問這個地址：

?

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

?

第2步：準備組件

我們打算實現一個簡單的tab選項卡，點擊tab就可以切換頁面視圖。接下來，我們就實現頁面的布局。

?

我們先用傳統的?<a/>?標簽來編寫，這里我們只展示html部分，css部分較為簡單，大家可以自行編寫。

?<div id="app">
??? <!--左側導航欄區域-->
??? <div class="nav">
??????? <a>簡易vue</a>
??????? <a>趣味ES6</a>
??????? <a>人在職場</a>
??? </div>

??? <!--右側內容區域-->
??? <div class="content"></div>
?</div>

?

這里大家注意到了，我們使用的還是我們熟悉的?<a/>?標簽，要是想修改成我們今天要學習的vue-router方式，該怎么改寫呢？

?

這里就要介紹vue-router給我們提供的兩個新組件：?<router-link/>?和?<router-view/>?，它們有什么用呢？

?

?<router-link/>?組件用于幫助用戶進行視圖導航，也就是我們傳統的?<a/>?標簽經常做的事。?<a/>?標簽用href屬性來指定導航的目標地址，而?<router-link/>?組件則用to屬性來指定目標地址。

?

注意：vue-router1.0的導航語法是給?<a/>?標簽添加v-link屬性。我們這里不展開講，只介紹vue-router2.0的用法。

?<router-view/>?組件負責渲染匹配到的視圖組件，也就是渲染<router-link>指向的目標地址。

?

接下來，我們看看怎么使用！

在上一段代碼中，我們稍做修改，改成：

<div id="app">
??? <!--使用 router-link 組件來導航.-->
??? <!-- 通過傳入 `to` 屬性指定鏈接. -->
??? <div class="nav">

??? ??<router-link to="/vue">
??????? 簡易vue
??? ? </router-link>

??? ? <router-link to="/es6">
??????? 趣味ES6
??? ??</router-link>

??? ? <router-link to="/career">
??????? 人在職場
???</router-link>

??? </div>

????<div class="content">
??? ???!--匹配到的組件將渲染在這里 -->
??? ?? <router-view></router-view>
????</div>

</div>

我們用?<router-link/>?替換了原來的?<a/>?標簽，原來的?<div class='content'><div/>?里面增加了?<router-view/>?組件。

?

接下來，我們就來編寫javascript部分的代碼。

首先，我們的導航中有三個欄目：

1.“簡易vue”

2.“趣味ES6”

3.“人在職場”

它們會導航指3個對應的視圖組件，目前我們還沒有定義，那么現在我們就來定義三個組件。

?

? //定義路由對應的組件。

? //1.簡易vue 對應的視圖組件
? const vueComponent = {
??? template:`<div>
??????????????? 這里是《簡易vue》教程
????????????? </div>`
? };

? //2.趣味ES6 對應的視圖組件
? const es6Component = {
??? template:`<div>
??????????????? 這里是《趣味ES6》教程
????????????? </div>`
? };

? //3.人在職場 對應的視圖組件
? const careerComponent = {
??? template:`<div>
??????????????? 《混口飯吃》與《工資待遇》
????????????? </div>`
? };

?

語法很簡單，用json對象的形式定義，至于template屬性對應的內容，就是將會被替換渲染到?<router-view/>?組件的內容了。

?

到了這里，有同學會有疑問了，3個視圖組件是準備好了，怎么將這3個組件和?<router-link/>?中的3個導航地址（to屬性對應的值）對應關聯起來呢？

別猜了，要關聯起來，我們可以直接創建一個router實例，創建實例的時候我們需要傳參數routes來進行配置，就可以實現定義它們之間的關聯關系。

看下面代碼：

? //創建router實例，并定義導航和組件的映射關系
? const router = new VueRouter({
??? //配置routes
??? routes:[
??????? //定義3個導航和組件的映射關系
??????? {
??????????? path:"/vue",
??????????? component:vueComponent
??????? },
??????? {
??????????? path:"/es6",
??????????? component:es6Component
??????? },
??????? {
??????????? path:"/career",
??????????? component:careerComponent
??????? },
??? ]
? });

?

代碼看起來很簡潔，可讀性很強，容易理解，但是練習敲這段代碼的時候，注意語法，routes的值是個數組類型，數組中每個元素是對象類型。

?

路由的對應關系我們定義好了，怎么將這個路由使用到我們的頁面上去呢？細心的同學發現我們還沒創建vue實例呢？

?

也就是到了最后一步，創建一個vue實例，創建的時候通過配置router參數來注入我們剛剛定義好的router路由。

?//創建vue實例，注入路由router
?const app = new Vue({
??? el:"#app",
??? router //此處是ES6語法，

????? //相當于router:router
?});

?

就這樣，整個實例app就有路由功能了。

?

是時候打開我們的頁面，看看整個文檔到底發生了？

我們看看文檔渲染之后，?<router-link/>?會變成什么樣：

（ router-link 初次渲染結果 ）

三個?<router-link/>?組件被渲染成了?<a/>?標簽，而to屬性，也變成?<a/>?標簽的href屬性。

?

再看看?<router-view/>?:

（ router-view 初次渲染結果 ）

貌似并沒有渲染出任何視圖組件，那是因為我們還沒有嘗試任何的導航。

我們點擊上面三個導航，?<router-view/>?組件就會被渲染成對應的視圖組件，我們試試看：

(我是gif，加載需要點時間)

當我們點擊左側的導航的時候，右側的?<router-view/>?就會渲染出對應的組件，實現視圖切換。

就這樣，我們就完成了使用vue-router來完成頁面中的視圖組件切換，我們已經成功入門了vue-router！

推薦

擴展閱讀

?1.《ECMAScript 6 系列》原創教程

?2.《Vue2.0基礎系列》原創教程

?3.《ECMAScript 6 系列》的 2 套習題

?4.《Vue2.0基礎系列》的 1 套習題

關于職場

?職場感悟：混口飯吃，談不上喜歡

?薪資待遇：如何看待企業提供的崗位待遇

?鄭州招聘：招聘前端3~5人

?廣州招聘：招聘前端2人

資源推薦

其實學好技術并不難，架構師免費分享全網全套最新web前端、JavaScript、HTML5、PHP、數據庫……等視頻資料！

[總價值超3萬！]年薪35萬以上的大牛幾乎都看了！

加微信:?abc15689892?免費領取，由于領取的朋友比較多，所以加微信時一定要備注：555，否則很難通過。

??

總結

以上是生活随笔為你收集整理的【vue2.0进阶】vue-router10分钟快速入门的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。