vue-router4 (六) 命名视图

news2025/1/21 22:10:26

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

应用场景：

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