路由巢狀

官方文件及原始碼：https://github.com/vuejs/vue-router/blob/1.0/docs/zh-cn/nested.md

巢狀路由

巢狀路由和巢狀元件之間的匹配是個很常見的需求，使用 vue-router 可以很簡單的完成這點。

假設我們有如下一個應用：

<div id="app">
  <router-view></router-view>
</div>

<router-view>是一個頂級的外鏈。它會渲染一個和頂級路由匹配的元件：

router.map({
  '/foo': {
    // 路由匹配到/foo時，會渲染一個Foo元件
    component: Foo
  }
})
 

同樣的，元件內部也可以包含自己的外鏈，巢狀的<router-view>。例如，如果我們在元件Foo的模板中添加了一個：

var Foo = {
  template:
    '<div class="foo">' +
      '<h2>This is Foo!</h2>' +
      '<router-view></router-view>' + // <- 巢狀的外鏈
    '</div>'
}

為了能夠在這個巢狀的外鏈中渲染相應的元件，我們需要更新我們的路由配置：

router.map({
  '/foo': {
    component: Foo,
    // 在/foo下設定一個子路由
    subRoutes: {
      '/bar': {
        // 當匹配到/foo/bar時，會在Foo's <router-view>內渲染
        // 一個Bar元件
        component: Bar
      },
      '/baz': {
        // Baz也是一樣，不同之處是匹配的路由會是/foo/baz
        component: Baz
      }
    }
  }
})
 

使用以上的配置，當訪問/foo時，Foo的外鏈中不會渲染任何東西，因為配置中沒有任何子路由匹配這個地址。或許你會想渲染一些內容，此時你可以設定一個子路由匹配/：

router.map({
  '/foo': {
    component: Foo,
    subRoutes: {
      '/': {
        // 當匹配到 /foo 時，這個元件會被渲染到 Foo 元件的 <router-view> 中。
        // 為了簡便，這裡使用了一個元件的定義
        component: {
          template: '<p>Default sub view for Foo</p>'
        }
      },
      // 其他子路由
    }
  }
})

路由展示：
 

/foo/bar                               /foo/baz
+------------------+                  +-----------------+
| Root             |                  | Root            |
| +--------------+ |                  | +-------------+ |
| | Foo          | |  +------------>  | | Foo         | |
| | +----------+ | |                  | | +---------+ | |
| | | Bar      | | |                  | | | Baz     | | |
| | |          | | |                  | | |         | | |
| | +----------+ | |                  | | +---------+ | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+