ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

vue-router4 (六) 命名视图

2026/10/8 9:02:21 拓冰建站 浏览量
vue-router4 (六) 命名视图

命名视图可以使得同一级(同一个组件)中展示更多的路由视图,而不是嵌套显示, 命名视图可以让一个组件中具有多个路由渲染出口,这对于一些特定的布局组件非常有用。

应用场景:

比如点击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