Vue 路由的命名视图

有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有

sidebar

main

router-view

default

<div id="app">
<button @click="pageFirst">Page First</button>
<button @click="pageSecond">Page Second</button>
<router-view></router-view>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

const First = { template: '<div>First Page</div>' } //调用路由name属性
const Second = { template:`
<div>
Second Page
<router-view name="com1"></router-view>
<router-view name="com2"></router-view>
</div>
`}
const Com1 = { template: "<div>this is com1</div>"}
const Com2 = { template: "<div>this is com2</div>"}
routes = [
{ path: '/first', name: "first", component: First },  //设置路由name属性
{ path: "/second", component: Second, children: [{
path: '', name: "second", components: {
com1: Com1,
com2: Com2
}
}]}
]
router = new VueRouter({
routes
})
const app = new Vue({
router,
methods: {
pageFirst(){ router.push('/first') },
pageSecond(){ router.push({ name: 'second' }) },
},
}).$mount('#app')