巢狀路由

其實很簡單，主要是vue2.0有一些變更。
所以要多看API文件，少看網上的教程 = =

配置路由

配置路由，這裡為Home配置了兩個子路由news和message

const routes = [{
    path: '/Hello',
    component: Hello
}, {
    path: '/Home',
    component: Home,
    children: [{
        path: 'news',
        component: News
    }, {
        path: 'message',
        component: Message
    }]
}, {
    path: '/About'
 
,
    component: About
}];

路由的使用

寫在Home.vue中，其實跟app.vue一樣。

<template>
    <div>
    <div>
        <h1>Home</h1>
        <p>{{msg}}</p>
    </div>
    <div>
        <ul class="nav nav-tabs">
            <li>
                <router-link
 
  to="/Home/news">News</router-link>
            </li>
            <li>
                <router-link  to="/Home/message">Message</router-link>  
            </li>
        </ul>
        <router-view></router-view>
    </div>
    </div>
</template
 
>

效果預覽

/home

點選message後，顯示在home的router-view中

命名路由

有時候覺得在

<router-link  to="/Home/news">News</router-link>

中寫一大堆的“/Home/news”這種長長的路由確實很麻煩，那麼解決方法來了
通過指定路由一個名字，比如這樣 name: ‘detail’
那麼訪問的時候就可以

```
<router-link  to="/Home/news/detail/">News</router-link>

的時候就可以寫成

<router-link  to="detail">News</router-link>

動態路由

所謂動態路由就是，在訪問某個頁面的時候後面帶引數
比如 這樣的一個訪問 http://localhost:8080/#/Home/news/detail/03
後面的03就是跟的引數。
我們希望可以在detail頁面可以獲取這個引數，vue-router給了我們一個很好的方法。
通過 $route.params.id 就可以獲取。

那麼這個id是怎麼傳過去的呢，看一下程式碼

<template>
<div>
    <ul>
        <li v-for="news in newsList">
            <router-link :to="{ name: 'detail', params: { id: news.id} }">{{news.title}}</router-link>
        </li>
    </ul>
    <div>
        <router-view></router-view>
    </div>
</div>
</template>

<script>    
    export default{
        data: function(){
            return {
                newsList: [
                    { id: '01', title: 'News 01'},
                    { id: '02', title: 'News 02'},
                    { id: '03', title: 'News 03'}
                ]
            }
        }
    }   
</script>

沒錯這裡，指定了路由路徑和引數params
之前寫的rooter-link 中的to是寫死的，所以不需要動態繫結，這裡的to前面寫了:to ，道理跟繫結value一樣

   <router-link :to="{ name: 'detail', params: { id: news.id} }">{{news.title}}</router-link>

另外看一下官方的說明

to其實是router.push的語法糖

router.push提供了以下的方法：

// 字串
router.push('home')

// 物件
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})

// 帶查詢引數，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

好了，話不多說，看一下效果

這是newsDetail檔案

<template>
    <div>
        News Detail - {{$route.params.id}} ......
    </div>
</template>

執行效果

成功顯示了我們傳入的引數。

路由也可以配置查詢引數

<a v-link="{ name: 'detail' , params: {id: news.id } , query: {a: 'xyz'} }">{{ news.title }}</a>

我們在app.vue中寫了一個模組，用於顯示當前路徑，引數，路由名稱，查詢物件

 <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="well">
          <p>當前路徑：<code>{{$route.path}}</code></p>
          <p>當前引數：<code>{{$route.params | json}}</code></p>
          <p>路由名稱：<code>{{$route.name}}</code></p>
          <p>路由查詢引數：<code>{{$route.query | json}}</code></p>
        </div>
      </div>
    </div>

測試效果，是不是很棒！！

至此，vue-router的基本功能就算學習完了。