命名视图可以使得同一级(同一个组件)中展示更多的路由视图,而不是嵌套显示, 命名视图可以让一个组件中具有多个路由渲染出口,这对于一些特定的布局组件非常有用。
应用场景:
比如点击login切换到组件A,点击reg切换到组件B+C就可以使用
const routes:Array<RouteRecordRaw> = [
{
path:"/", //路径
name:"Home", //路由名称
component: ()=>import("../components/Home.vue"),
children:[
{
path:"/user1",
name:"A",
components:{
default:()=>import("../components/A.vue"),
}
},
{
path:"/user2",
name:"B",
components:{
bbb:()=>import("../components/B.vue"),
ccc:()=>import("../components/C.vue")
}
}
]
}
]
对应Router-view 通过name 对应组件
<div>
<router-link to="/user1" style="margin-right: 20px;"> login</router-link>
<router-link to="/user2"> reg</router-link>
<!--默认的渲染出口,对应default中的组件-->
<router-view></router-view>
<!--具名路由:name展示components中对应名称的组件-->
<router-view name="bbb"></router-view>
<router-view name="ccc"></router-view>
</div>
注:在components中使用,后边有s