Vue学习-09：命名视图（多视图）

[code]    window.onload = function() {
let r1 = new VueRouter({
routes: [{
path: '/user',
components: {      //同一路由 多个<router-view>视图
default: {
template: '<div>用户列表</div>'
},             //只能有一个未命名的路由，称为默认路由
a: {
template: '<div>文章列表</div>'
},
b: {
template: '<div>评论列表</div>'
}
}
}]
})
let vm = new Vue({
el: '#div1',
router: r1
})
}

[code]    <div id="div1">
<router-link to="/user">链接</router-link>
<router-view></router-view>
<router-view name="a"></router-view>   //name 绑定
<router-view name="b"></router-view>   //name 绑定
</div>

知识点：

多视图是同一个路由下，包含多个视图。视图创建用 components。

路由：工作原理是匹配锚点，可以带参数，可以嵌套 可以多视图