製作巢狀路由

昨天介紹如何新增路由及路由連結，今天再來更深入一點點，就是製作巢狀路由，在切換元件的時候，如果只想切換部份內容，就可以使用巢狀路由的方式，馬上來看看範例吧！

src/components/Child1.vue

<template>
  <div class="hello">
    <h2>This is Child 1 !!!!</h2>
  </div>
</template>

<script>
export default {
  name: 'Child1',
  data () {}
}
</script>

這裡我先建立三個 .vue 檔，內容僅有 Child1 改為 Child2、Child3 這樣。

src/components/Page.vue

<template>
  <div class="hello">
    <h1>{{msg}}</h1>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'Page',
  data () {
    return {
      msg: 'Hello Vue'
    }
  }
}
</script>

接下來，在昨天的 Page 的檔案裡新增 router-view 。

router/index.js

import Child1 from '@/components/Child1'
import Child2 from '@/components/Child2'
import Child3 from '@/components/Child3'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/page',
      name: 'Page',
      component: Page,
      children: [
        {
          path: '',
          name: 'Child1',
          component: Child1
        },
        {
          path: 'child2',
          name: 'Child2',
          component: Child2
        },
        {
          path: 'child3',
          name: 'Child3',
          component: Child3
        },
      ]
    },
  ]
})

然後到 router 的配置檔 index.js 裡，在 Page 的配置裡新增 childrens 的屬性，內容是陣列，接下來就將 Child1 到 Child3 的配置輸入如上，這裡需要注意的是 Child1 的路徑我們並沒有設定，這樣在我們訪問 Page 的頁面的時候會預設帶入 Child1 的內容，再來就是路徑的設定盡量不要用大寫的英文字母。

這時運行後打開頁面，就可以到 Page 的頁面上看到 Child1 的內容囉！
如果要切換成 Child2 的內容，只要更改路由為http://localhost:8080/#/page/child2就可以囉！
但是，其實還有一個地方沒有完成，就是我們還沒有新增路由的連結，所以讓我們來完成一下。

src/components/Page.vue

<template>
  <div class="hello">
    <h1>{{msg}}</h1>
    <router-link to="/page">Child1</router-link>
    <router-link to="/page/child2">Child2</router-link>
    <router-link to="/page/child3">Child3</router-link>
    <router-view></router-view>
  </div>
</template>

新增路由的內容就如上，其實就跟昨天的方法一樣唷！是不是很簡單呢！？

那麼，明天再見囉！