嵌套路由
嵌套路由和嵌套組件之間的匹配是個很常見的需求，使用 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>' } }, // 其他子路由 } } })