3、vue-router命名视图详解

/src/App.vue

/src/router/index.ts

import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";

const routes: Array = [
    {
        path: '/',
        component: () => import('../pages/Root.vue'),
        children: [
            {
                path: '',
                components: {
                    default: () => import('../pages/A.vue'),
                }
            },
            {
                path: '/reg',
                components: {
                    // 命名视图
                    "b": () => import('../pages/B.vue'),
                    "c": () => import('../pages/C.vue'),
                }
            }
        ]
    }
];

const router = createRouter({
    history: createWebHashHistory(),
    routes
})

export default router;

/src/pages/Root.vue

/src/pages/A.vue

/src/pages/B.vue

/src/pages/C.vue

这3个组件的内容省略