原布局

App.vue

<template>
    <RouterView /> 
</template>
<script setup></script>
<style scoped></style>

HelloWord.vue

<template>
    <div>
        <Sidebar />
        <main>HelloWord内容...</main>
    </div> 
</template>
<script setup>
    import Sidebar from '@/components/Sidebar'
</script>
<style scoped></style>

Sidebar.vue

<template> 
	<main>Sidebar内容...</main> 
</template>
<script setup></script>
<style scoped></style>

期望布局

命名视图布局

• 降低布局耦合

router.js

routes: [
	{
	path: "/",
	name: "home",
	components: { 
        default: () => import(".../.../Home.vue"),
        about: () => import(".../.../About.vue"), 
      },
    }
]

App.vue

<template>
    <RouterView /> 
    <RouterView name="aidebar"/> 
</template>
<script setup></script>
<style scoped></style>

HelloWord.vue

<template>
    <main>HelloWord内容...</main>
</template>
<script setup></script>
<style scoped></style>

Sidebar.vue

<template>
    <main>Sidebar内容...</main>
</template>
<script setup></script>
<style scoped></style>