vue-router

官方文檔：

舊版：https://github.com/vuejs/vue-router/tree/1.0/docs/zh-cn

新版：http://router.vuejs.org/（2.0版本）

此文是舊版

文件結構圖：

基本用法：

<router-view>是一個頂級的路由外鏈，用於渲染匹配的組件。

例如：我的應用入口是app.vue

那么在app.vue中添加如下代碼， 此處涉及ES6，可以先看下這篇文章：http://www.csdn.net/article/2015-04-30/2824595-Modules-in-ES6

app.vue

<template>
    <div class='page index-content'>
        <router-view class="view"
        keep-alive
        transition="slide"></router-view>
        <Footers></Footers>
    </div>
</template>
<script>
/*
*ES6模塊系統特性:
1.使用export關鍵詞導出對象。這個關鍵字可以無限次使用；
2.使用import關鍵字將其它模塊導入某一模塊中。它可用來導入任意數量的模塊；
3.支持模塊的異步加載；
4.為加載模塊提供編程支持。
*/
//導入footer組件
import Footers from '../components/footer'
//導入路由
import Router from 'vue-router'
//default導出，使用關鍵字default，可將對象標注為default對象導出。default關鍵字在每一個模塊中只能使用一次。它既可以用於內聯導出，也可以用於一組對象導出聲明中。
export default{
    components:{
        Footers
    }
}
</script>

Footer是一個公用的頁腳組件，存放於components文件夾中

footer.vue

<template>
    <div class='footer'>
        <a v-link="{path:'/home'}">
            <span v-if="$route.name == 'home'" class='active'>首頁</span>
            <span v-else>首頁</span>
        </a>
        <a v-link="{path:'/list'}">
            <span v-if="$route.name == 'list'" class='active'>跳轉1</span>
            <span v-else>跳轉1</span>
        </a>
        <a v-link="{path:'/account'}">
            <!-- 根據路由名稱判斷選中的項 -->
            <span v-if="$route.name == 'account'" class='active'>跳轉2</span><!-- 滿足條件 -->
            <span v-else>跳轉2</span><!--不滿足-->
        </a>
    </div>
</template>
<style>
    .footer{
        background: #fff;
        border-top: 1px solid #dedede;
        display: table;
    }
    .footer a{
        display: table-cell;
        text-align: center;
        text-decoration: none;
        color: #666
    }
    .active{
        color:red !important;
    }
</style>

由於app.vue是最頂級的入口文件，在app.vue中引用footer組件的話，所有頁面都會包含footer內容，但是二級頁面等子頁面不需要，所以得把app.vue中代碼復制到index.vue中，把app.vue中footer相關的部分刪掉。

在index.html中添加如下代碼，創建一個路由實例。

<app></app>

在main.js中配置route.map

main.js

import Vue from 'vue'
import VueRouter from 'vue-router'//導入vue-router
//導入組件
import App from './App'
import Index from './page/index'
import list from './page/list'
import Home from './page/home'
import Account from './page/account'
Vue.use(VueRouter)
var router = new VueRouter()
router.map({
    //默認指向index
    '/':{
        name:'index',
        component:Index,
        //子路由(有頁底)
        subRoutes:{
            '/home':{
                name:'home',
                component:Home
            },
            '/account':{
                name:'account',
                component:Account
            }
        }
    },
    //沒有footer
    '/list':{
        name:'list',
        component:list
    }
})
//啟動一個啟用了路由的應用
router.start(App,'app')

router.start中的'app'，指的是index中的：<app></app>，可以取其他的名字，但是得和index中的名字一致。

這時啟動項目（npm run dev）會發現，頁面上只有footer，而沒有顯示其他內容。因為index.vue本來就只有footer而沒有其他內容，但是我們肯定要顯示頁面，就要用到

router.redirect(redirectMap)重定向

例如：我們要默認載入home頁面

在main.js中加入

//重定向到home router.redirect({ '*':'home' }) router.start(App,'app')

 在index中加入init()函數

<script>
export default{
    components:{
        Footers
    },
    init(){
        var router = new Router()
          router.go('/home');//跳轉到home組件
        }
}
</script>

然而，經過測試，redirect並沒有重定向的home，載入home的真正原因是：router.go('/home')

此時，進入項目就會顯示home頁面的內容了。

路由規則和路由匹配

Vue-router 做路徑匹配時支持動態片段、全匹配片段以及查詢參數（片段指的是 URL 中的一部分）。對於解析過的路由，這些信息都可以通過路由上下文對象（從現在起，我們會稱其為路由對象）訪問。 在使用了 vue-router 的應用中，路由對象會被注入每個組件中，賦值為 this.$route ，並且當路由切換時，路由對象會被更新。

$route.path

字符串，等於當前路由對象的路徑，會被解析為絕對路徑，例如：/list，來源於route.map中配置的路徑

router.map({
   '/home':{
    name:'list',
    component:Home
    } 
})

dom中

<a v-link="{path:'/list'}">前往list列表頁面</a>

或者（具名路徑）

<a v-link="{name:'list'}">前往list列表頁面</a>

帶參數跳轉（例如：從列表頁跳轉到列表詳情頁）

<ul>
    <li v-for="item in alllist">
        <!--點擊跳轉到詳情-->
        <a v-link="{ name: 'listDetail',params:{id: item.id }}">
            {{item.title}}<!--標題 -->
        </a>
    </li>
</ul>

script。

Promise & ES6 詳見vue-router的data部分： http://router.vuejs.org/zh-cn/pipeline/data.html

<script>
export default{
    data(){
        return{
            alllist:[]
        }
    },
    route:{
        data({to}){
            return Promise.all([
                //獲取數據
                this.$http.get('http://192.168.0.1/knowledge/list',{'websiteId':2,'pageSize':5,'pageNo':1,'isTop':1})
            ]).then(function(data){
                return{
                    //將獲取到的數據復制給allllist數組
                    alllist:data[0].data.knowledgeList
                }
            },function(error){
                //error
            })
        }
    }
}
</script>

 詳情頁代碼

<div class='article-box' v-if="!$loadingRouteData">
    <p class='font-bigger'>{{listDetail.title}}</p>
    <p class='co9a9a9a article-time'><span>閱讀：{{listDetail.viewTimes}}</span><span>發布時間: {{listDetail.publishTime | timer}}</span></p>
    <div class='content-img'>
       {{{listDetail.content}}}<!--讀取富文本信息-->
    </div>
</div>
<script>
export default{
    data() {
        return{
            listDetail:[],
            routeid:''
            //若不是走路由，采用另一種方式獲取
            //routeid:this.$route.query.id
        }
    },
    route:{
        //id:來源於a標簽的參數
        data ({to:{params:{ id}}}) {
            var that = this ; 
            that.$set('routeid',id)//獲取id
            return Promise.all([
                that.$http.get('http://192.168.0.1/rest/knowledge',{'id':id}),
                ]).then(function(data){
                     console.log(data)
                     return{
                        listDetail:data[0].data.knowledge,
                    } 
            })
        }
    },
    methods:{
        collect(){
            
        }
    },
    ready(){
        var that = this;
        console.log(that.$get('routeid')) //得到傳進來的id
    }
}
</script>

 此時router要做下修改

'/list':{
    name:'list',
    component:GetReceipt
},
'/listDetail/:id':{
    name:'listDetail',
    component:GetReceiptDetail
}