對於SPA ( single pageapplication 單頁面應用)，尤其是做移動端的網頁應用，由於使用 <a/> 標籤實現頁面的切換和跳轉，會有一定的加載時間消耗，經常遇到這樣的畫面：
網速慢一點的時候，就一直在加載，嚴重影響產品的用戶體驗，這也是（html5）移動端網頁應用在使用流暢度幹不過原生app的地方之一。
所以常用的做法將網頁應用做成一個SPA單頁面應用，用視圖切換（隱藏和顯示）來模擬頁面的切換。而但你的項目使用了vue進行開發，那麼在實現視圖切換的時候，你就可以藉助vue-router來幫助你方便地實現視圖切換。
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用於構建SPA單頁面應用。vue的單頁面應用是基於路由和組件的，相當於傳統頁面是基於 <a/> 標籤鏈接和頁面，路由用於設定訪問路徑，並將路徑和組件映射起來，這樣就可以實現通過路由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/[email protected]/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/> 組件被渲染成了 <a/> 標籤，而to屬性，也變成 <a/> 標籤的href屬性。
再看看 <router-view/> :
我們點擊上面三個導航， <router-view/> 組件就會被渲染成對應的視圖組件，我們試試看：
當我們點擊左側的導航的時候，右側的 <router-view/> 就會渲染出對應的組件，實現視圖切換。
就這樣，我們就完成了使用vue-router來完成頁面中的視圖組件切換，我們已經成功入門了vue-router！