3、vue-router命名视图详解

/src/App.vue

<script setup lang="ts"></script>
<template>
  <router-view></router-view>
</template>
<style scoped></style>

/src/router/index.ts

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

const routes: Array<RouteRecordRaw> = [
    {
        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

<script setup lang="ts"></script>
<template>
    <!-- 使用场景：
        1、如果有2个tab页，这2个tab页展示的详情不一样，可以用命名视图
        2、如果一个页面多人开发，自己又不想重新写组件，就可以使用命名视图的方式来写
     -->
    <router-link to="/">首页</router-link>
    <router-link to="/reg">子页</router-link>

    <!-- 这个是components里default的视图 -->
    <router-view></router-view>
    <!-- 下面两个是components里有命名的视图，名字分别是"b"和"c" -->
    <router-view name="b"></router-view>
    <router-view name="c"></router-view>
</template>
<style scoped></style>

/src/pages/A.vue

/src/pages/B.vue

/src/pages/C.vue

这3个组件的内容省略