# 嵌套路由 嵌套路由和嵌套組件之間的匹配是個很常見的需求，使用 vue-router 可以很簡單的完成這點。 假設我們有如下一個應用： ``` html <div id="app"> <router-view></router-view> </div> ``` `<router-view>` 是一個頂級的外鏈。它會渲染一個和頂級路由匹配的組件： ``` js router.map({ '/foo': { // 路由匹配到/foo時，會渲染一個Foo組件 component: Foo } }) ``` 同樣的，組件內部也可以包含自己的外鏈，嵌套的 `<router-view>` 。例如，如果我們在組件 `Foo` 的模板中添加了一個： ``` js var Foo = Vue.extend({ template: '<div class="foo">' + '<h2>This is Foo!</h2>' + '<router-view></router-view>' + // <- 嵌套的外鏈 '</div>' }) ``` 為了能夠在這個嵌套的外鏈中渲染相應的組件，我們需要更新我們的路由配置： ``` js 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` 的外鏈中不會渲染任何東西，因為配置中沒有任何子路由匹配這個地址。或許你會想渲染一些內容，此時你可以設置一個子路由匹配 `/` ： ``` js router.map({ '/foo': { component: Foo, subRoutes: { '/': { // 當匹配到 /foo 時，這個組件會被渲染到 Foo 組件的 <router-view> 中。 // 為了簡便，這里使用了一個組件的定義 component: { template: '<p>Default sub view for Foo</p>' } }, // 其他子路由 } } }) ``` 查看對應的實例 [在線](http://jsfiddle.net/yyx990803/naeg67da/).