開始使用vue-router
這里我假設大家之前都用模塊工程的方式實踐了一個vue Demo，在此基礎上我們添加vue-router。
1.安裝
2.在項目main.js中安裝路由插件
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)
3.在組件中使用路由
先看下路由跳轉的效果吧，大家注意看地址欄變化哈。
下面這個tabBar就是一個組件（偷偷告訴你，在微信小程序中，這個功能直接配置app.json文件就好了）
每個tab點擊時路由地址會相應變化，其實是渲染相應的組件，具體我們來看代碼。
footer.vue組件
<template> <div class="footer"> <div class="readType" v-if="readType.count">{{readType.count}}</div> <ul class="main-nav"> <li> <router-link to="/home"> <i class="icon-nav icon-nav1"></i><span>首頁</span> </router-link> </li> <li> <router-link to="/quan" v-bind:class="{rrouter:activ}"> <i class="icon-nav icon-nav2"></i><span>學友圈</span> </router-link> </li> <li> <router-link to="/friend"> <i class="icon-nav icon-nav3"></i><span>學友</span> </router-link> </li> <li> <router-link to="/find"> <i class="icon-nav icon-nav4"></i><span>發現</span> </router-link> </li> <li> <router-link to="/mine"> <i class="icon-nav icon-nav5"></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構造詳細配置
內容有點多，可能還要再分細一點，寫詳細點。但還是想把自己遇到過的問題，用到的知識點通過自己的理解分享出來。
以上所述是小編給大家介紹的Vue.js系列之vue-router(上)(3)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
