Vue.js系列之vue-router(上)(3)

更新時間：2017年01月03日 09:40:10 投稿：mrr

這篇文章主要介紹了Vue.js系列之vue-router(上)(3)的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下

說明：

我們項目現(xiàn)在用的是：vue2.0 + vue-cli + webpack + vue-router2.0 + vue-resource1.0.3

如果大家在實踐的過程中與本文所說的內(nèi)容有較大區(qū)別的話看看是不是版本問題。

本文是一系列文章，在我對Vue有了更深刻的理解認(rèn)識之后會對文章及時進(jìn)行修改或更正。歡迎大家批評指出錯誤。以下是已完成的文章列表。

1.Vue.js系列之項目搭建（1）

2.Vue.js系列之項目結(jié)構(gòu)說明（2）

概述

Vue非常適用于實踐單頁面應(yīng)用程序也就是平時大家說的比較多的SPA（single page application），這點(diǎn)應(yīng)該了解過Vue的應(yīng)該都知道吧。一般的單頁面應(yīng)用是基于路由或頁面之間的鏈接來形成的，Vue是基于路由和組件的，所以我們今天就來了解下vue-router。vue-router是Vue.js官方的路由插件，它和vue.js深度集成，用于設(shè)定訪問路徑，并將路徑和組件映射起來，我們給每個組件一個路由地址，跳轉(zhuǎn)路由相當(dāng)于組件切換。vue-router的內(nèi)容還是比較多的，這里我只分享我自己項目中用到的地方，其他地方大家可以看文檔啦。

vue-router官網(wǎng)：http://router.vuejs.org/zh-cn/（中）

英文官網(wǎng)你知道啦，直接去掉后面的"zh-cn/"就好了。

開始使用vue-router

這里我假設(shè)大家之前都用模塊工程的方式實踐了一個vue Demo，在此基礎(chǔ)上我們添加vue-router。

1.安裝

npm install vue-router

2.在項目main.js中安裝路由插件

import Vue from 'vue' 
import VueRouter from 'vue-router' 
Vue.use(VueRouter)

3.在組件中使用路由

先看下路由跳轉(zhuǎn)的效果吧，大家注意看地址欄變化哈。

路由效果圖

下面這個tabBar就是一個組件（偷偷告訴你，在微信小程序中，這個功能直接配置app.json文件就好了）

每個tab點(diǎn)擊時路由地址會相應(yīng)變化，其實是渲染相應(yīng)的組件，具體我們來看代碼。

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>學(xué)友圈</span> 
        </router-link> 
      </li> 
      <li> 
        <router-link to="/friend"> 
          <i class="icon-nav icon-nav3"></i><span>學(xué)友</span> 
        </router-link> 
      </li> 
      <li> 
        <router-link to="/find"> 
          <i class="icon-nav icon-nav4"></i><span>發(fā)現(xiàn)</span> 
        </router-link> 
      </li> 
      <li> 
        <router-link to="/mine"> 
          <i class="icon-nav icon-nav5"></i><span>我的</span> 
        </router-link> 
      </li> 
    </ul> 
  </div> 
</template>

這里有幾點(diǎn)需要知道：

1.使用 router-link 組件來導(dǎo)航.

2.通過傳入 `to` 屬性指定鏈接.

3.<router-link> 默認(rèn)會被渲染成一個 `<a>` 標(biāo)簽

路由出口

我們前面說了，路由跳轉(zhuǎn)就是相應(yīng)組件在渲染，那么渲染的內(nèi)容是怎么顯示也頁面中的呢，那就是路由出口'<router-view></router-view>'做的事了，路由匹配到的組件將渲染在這里。

路由出口我們可以設(shè)置在當(dāng)前組件中也可以設(shè)置在其他組件中，項目中我們就將所有組件都渲染在最大的容器App.vue組件中（我們項目中App組件只作為渲染容器）。

<template> 
 <div id="app"> 
  <router-view></router-view> 
 </div> 
</template>

JavaScript

定義路由文件可以直接寫在main.js文件中，也可以新建一個js文件，因為我們的組件比較多，所以單獨(dú)把路由拿出來寫了一個router.js文件。

// 0. 如果使用模塊化機(jī)制編程，進(jìn)入Vue和VueRouter，要調(diào)用 Vue.use(VueRouter) 
import Vue from 'vue' 
import VueRouter from 'vue-router' 
Vue.use(VueRouter) 
// 1. 定義（路由）組件。 
// 可以從其他文件 import 進(jìn)來，我們一般都是建好了組件再來寫路由的 
// 所以就會有好多這樣的語句。 
import home form "./components/home" 
import login form "./components/login" 
// 2. 定義路由 
 routes: [ //這里跟1.x有挺大區(qū)別，有接觸的自己看清楚哦 
  { 
   path: '/',  //瀏覽器網(wǎng)路請求走通之后默認(rèn)就會去找域名下的根目錄， 
   name: 'home', //所以我們就把這個組件作為默認(rèn)首頁 
   component: home 
  }, 
  { 
   path: '/login', 
   name: 'login', 
   component: login 
  } 
  ] 
// 3. 創(chuàng)建 router 實例，然后傳 `routes` 配置 
// 你還可以傳別的配置參數(shù), 不過先這么簡單著吧。 
const router = new VueRouter({   //你就當(dāng)const是var 
 routes 
//（縮寫）相當(dāng)于 routes: routes 
}) 
// 4. 創(chuàng)建和掛載根實例。 
// 記得要通過 router 配置參數(shù)注入路由， 
// 從而讓整個應(yīng)用都有路由功能 
const app = new Vue({ 
 router 
}).$mount('#app') 
// 現(xiàn)在，應(yīng)用已經(jīng)啟動了！

總結(jié)

上篇先分享到這里，主要了解了有以下幾點(diǎn)：

1.vue-router的安裝和使用

2.在組件模板中的書寫格式

3.知道了路由出口

4.如何定義一個路由

5.創(chuàng)建路由實例和掛載實例

下篇我將給大家繼續(xù)分享路由的其他用法（項目中用到的）：

1.如何實現(xiàn)當(dāng)前頁激活，tab標(biāo)簽同時也激活，即active-class

2.路由跳轉(zhuǎn)時添加過渡動效

3.路由傳參及命名路由

4.實現(xiàn)資源懶加載