概述

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

開始使用vue-router

npm install vue-router 

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

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

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 from "./components/home"  
import login from "./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.創建路由實例和掛載實例

Vue.js系列之vue-router(上) （轉載自向朔1992）