前言

最近練習Vue，看到官方文件中的巢狀路由，
不做不知道，實在是太坑了，網上資料demo少之又少，然後自己就做了一個demo,用了vue2.0巢狀路由實現豆瓣電影分頁功能，供大家學習學習，寫得不好望見諒。

demo截圖：

Demo簡單介紹

主路由：Top250(charts)，正在熱映(hot)，即將上映(ing)，新片榜(newmovie)

const router = new VueRouter({
    routes: [
        {
          path: '/',   //設定預設路由為Top250
          component:
 
 charts
        },
        {
          path: '/charts',  //Top250
          component: charts
        },
        {
          path: '/hot', 
          component: hot
        },
        {
          path: '/ing',
          component: ing
        },
        {
          path: '/newmovie',
          component: newmovie
        },
    ]
 }
 

在top250(charts)上添加了分頁功能作為子路由，在配置上新增：

{
  path: '/charts/:id',  //子路由
  component: charts,
  children: [
    {path: '1', component: moviecontent},  
    {path: '2', component: moviecontent2},
    {path: '3', component: moviecontent3}
    ]
}

在charts元件上新增入口:

<router-link to="/charts/1">1</router-link
 
>
<router-link to="/charts/2">2</router-link>
<router-link to="/charts/3">3</router-link>

在charts元件上添加出口:

<router-view></router-view>

子路由如何跳轉同一組件時資料實現更新？

同樣，在top250(charts)上添加了分頁功能作為子路由，但指向同一組件：

{
  path: '/charts/:id',  //子路由
  component: charts,
  children: [
    {path: '1', component: moviecontent2}, // 同一組件
    {path: '2', component: moviecontent2}, // 同一組件
    {path: '3', component: moviecontent2} // 同一組件
    ]
}

畫重點：

因為路由切換同一組件時，例項已經在第一次進入路由時建立了，之後切換路由不會被建立了，所以只能呼叫一次created,因此要使用$route監聽getData方法，當路由切換的時候，呼叫getData方法，重新獲取資料。

created: function () {
        //第一次進入路由時資料的更新
        this.$http.jsonp()
}，
watch: {
  '$route': 'getData' //切換路由，呼叫getData方法
},
methods: {
  getData: function () {
       //路由切換，重新請求資料
       this.$http.jsonp()
  }
}

程式碼寫得好爛，湊合著看吧，反正子路由還是成功的啊！哈哈哈

有興趣的朋友可以看看我寫的豆瓣webapp

demo演示：