我們項目現在用的是：vue2.0 + vue-cli + webpack + vue-router2.0 + vue-resource1.0.3
如果大家在實踐的過程中與本文所說的內容有較大區別的話看看是不是版本問題。
本文是一系列文章，在我對Vue有了更深刻的理解認識之後會對文章及時進行修改或更正。歡迎大家批評指出錯誤。以下是已完成的文章列表。
1.Vue.js系列之項目搭建（1）
2.Vue.js系列之項目結構說明（2）
概述Vue非常適用於實踐單頁面應用程式也就是平時大家說的比較多的SPA（single page application），這點應該了解過Vue的應該都知道吧。一般的單頁面應用是基於路由或頁面之間的連結來形成的，Vue是基於路由和組件的，所以我們今天就來了解下vue-router。vue-router是Vue.js官方的路由插件，它和vue.js深度集成，用於設定訪問路徑，並將路徑和組件映射起來，我們給每個組件一個路由地址，跳轉路由相當於組件切換。vue-router的內容還是比較多的，這裡我只分享我自己項目中用到的地方，其他地方大家可以看文檔啦。
vue-router官網：http://router.vuejs.org/zh-cn/（中）英文官網你知道啦，直接去掉後面的"zh-cn/"就好了。
開始使用vue-router這裡我假設大家之前都用模塊工程的方式實踐了一個vue Demo，在此基礎上我們添加vue-router。
1.安裝
npm install vue-router
2.在項目main.js中安裝路由插件
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
3.在組件中使用路由
先看下路由跳轉的效果吧，大家注意看地址欄變化哈。
下面這個tabBar就是一個組件（偷偷告訴你，在微信小程序中，這個功能直接配置app.json文件就好了）
每個tab點擊時路由地址會相應變化，其實是渲染相應的組件，具體我們來看代碼。
footer.vue組件<template>
<div>
<div v-if="readType.count">{{readType.count}}</div>
<ul>
<li>
<router-link to="/home">
<i></i><span>首頁</span>
</router-link>
</li>
<li>
<router-link to="/quan" v-bind:class="{rrouter:activ}">
<i></i><span>學友圈</span>
</router-link>
</li>
<li>
<router-link to="/friend">
<i></i><span>學友</span>
</router-link>
</li>
<li>
<router-link to="/find">
<i></i><span>發現</span>
</router-link>
</li>
<li>
<router-link to="/mine">
<i></i><span>我的</span>
</router-link>
</li>
</ul>
</div>
</template>
這裡有幾點需要知道：
1.使用 router-link 組件來導航.
2.通過傳入 `to` 屬性指定連結.
3.<router-link> 認會被渲染成一個 `<a>` 標籤
路由出口我們前面說了，路由跳轉就是相應組件在渲染，那麼渲染的內容是怎麼顯示也頁面中的呢，那就是路由出口'<router-view></router-view>'做的事了，路由匹配到的組件將渲染在這裡。
路由出口我們可以設置在當前組件中也可以設置在其他組件中，項目中我們就將所有組件都渲染在最大的容器App.vue組件中（我們項目中App組件只作為渲染容器）。
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
JavaScript定義路由文件可以直接寫在main.js文件中，也可以新建一個js文件，因為我們的組件比較多，所以單獨把路由拿出來寫了一個router.js文件。
// 0. 如果使用模塊化機制編程，進入Vue和VueRouter，要調用 Vue.use(VueRouter)
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
// 1. 定義（路由）組件。
// 可以從其他文件 import 進來，我們一般都是建好了組件再來寫路由的
// 所以就會有好多這樣的語句。
import home form "./components/home"
import login form "./components/login"
// 2. 定義路由
routes: [ //這裡跟1.x有挺大區別，有接觸的自己看清楚哦
{
path: '/', //瀏覽器網路請求走通之後默認就會去找域名下的根目錄，
name: 'home', //所以我們就把這個組件作為默認首頁
component: home
},
{
path: '/login',
name: 'login',
component: login
}
]
// 3. 創建 router 實例，然後傳 `routes` 配置
// 你還可以傳別的配置參數, 不過先這麼簡單著吧。
const router = new VueRouter({ //你就當const是var
routes
//（縮寫）相當於 routes: routes
})
// 4. 創建和掛載根實例。
// 記得要通過 router 配置參數注入路由，
// 從而讓整個應用都有路由功能
const app = new Vue({
router
}).$mount('#app')
// 現在，應用已經啟動了！
總結
上篇先分享到這裡，主要了解了有以下幾點：
1.vue-router的安裝和使用
2.在組件模板中的書寫格式
3.知道了路由出口
4.如何定義一個路由
5.創建路由實例和掛載實例
下篇我將給大家繼續分享路由的其他用法（項目中用到的）：
1.如何實現當前頁激活，tab標籤同時也激活，即active-class
2.路由跳轉時添加過渡動效
3.路由傳參及命名路由
4.實現資源懶加載
5.編程式導航
6.router-link的其他表現形式
7.Router構造詳細配置
內容有點多，可能還要再分細一點，寫詳細點。但還是想把自己遇到過的問題，用到的知識點通過自己的理解分享出來。
明天還是要用markDown來寫，默認的這個編輯器排版實在太累了，經常出問題，但是我的markDown不知道為什麼，光標經常會自動換行，不知道有沒有朋友遇到過，能否解答一下。
今天小六分享的內容，各位前端客們get到了麼？歡迎更多前端客們加入進來，對每天推送的內容進行點評、糾錯，如果你有想要與大家分享的前端技巧，歡迎給前端客投稿。
前 端 客
簡 單 高 效
qianduan_ke
請點擊閱讀原文