vue3 - 37.router.7 - 命名视图

命名视图的方法是给配置路由通过components定义，components接收的是一个对象，可以放N多个子组件

并且默认子组件通过 default 设置，也就是说页面一打开，首先展示的是通过 default 定义的默认子组件页面

这种场景比如我们有一个tab页，分配给不同的人去开发，但是我们又不想写组件，通过页面的形式我们可以这样去做：

router/index.ts：

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
const routes:Array<RouteRecordRaw> = [
    {
        path:'/',
        component:() => import('../components/root.vue'),
        children:[
            {
                path:"/user1",
                components:{
                    default:() => import('../components/A.vue')
                }
            },
            {
                path:"/user2",
                components:{
                    bbb:() => import('../components/B.vue'),
                    ccc:() => import('../components/C.vue')
                }
            },
        ]
    }
]
const router = createRouter({
    history:createWebHistory(),
    routes
})
export default router

在需要定义的主页面中：

<template>
    <div>
        <RouterLink to="/user1" style="margin-right:20px;">user1</RouterLink>
        <RouterLink to="/user2">user1</RouterLink>
        <hr />
        <RouterView />
        <RouterView name="bbb" />
        <RouterView name="ccc" />
    </div>
</template>
<script setup lang='ts'>
import { RouterView } from 'vue-router';
</script>