互连路由和互连组件之间的匹配是一个很常见的需求，使用vue-router可以很简单的完成这点。
假设我们有如下一个应用：
< div id =“ app ” >
< 路由器视图> </ 路由器视图>
</ div >
<router-view> 是一个顶级的外链。它会渲染一个和顶级路由匹配的组件：
路由器。map （{
‘/ foo‘：{
//路由匹配到/ foo时，会渲染一个Foo组件
component：Foo
}
} ）
同样的，组件内部也可以包含自己的外链，嵌套的<router-view>。例如，如果我们在组件Foo的模板中添加了一个：
var Foo = {
template：
‘<div class =“ foo”>‘ +
‘<h2>这是Foo！</ h2>‘ +
‘<router-view> </ router-view>‘ + // <-嵌入套的外链
‘</ div>‘
}
为了能够在这个嵌套的外链中渲染相应的组件，我们需要更新我们的路由配置：
路由器。map （{
‘‘/ foo‘：{
component：Foo ，
//在/ foo下设置一个子
路由subRoutes：{
‘/ bar‘：{
//当匹配到/ foo / bar时，会在Foo的<router-view >内部渲染
//一个Bar组件
component：Bar
} ，
‘/ baz‘：{
// Baz也是一样，不同之处是匹配的路由会是/ foo / baz
component：Baz
}
}
}
} ）
使用以上的配置，当访问/foo时，Foo的外链中不会渲染任何东西，因为配置中没有任何子路由匹配该地址。或许你会想呈现一些内容，此时您可以设置一个子路由匹配/：
路由器。映射（{
‘/富‘：{
成分：富，
子路径：{
‘/‘ ：{
//当匹配到/富时，这个组件会被渲染到富组件的<路由器视图>中
//为了简便，，这里使用了一个组件的定义
组件：{
template：‘<p> Foo的默认子视图</ p>‘
}
} ，
//其他子路由
}
}
} ）
原文：https://www.cnblogs.com/congxiaocong/p/13728494.html