10-命名视图.md

同时 (同级) 展示多个视图，而不是嵌套展示

ex: 创建一个布局，有 头部 和 尾部 两个视图

my-vue-router/src/router/index.js

components

import Order from "../views/Order.vue";
import Top from "../views/Top.vue";
import Footer from "../views/Footer.vue";

const routes = [
    {
        path: "/order",
        components: {
            default: Order,
            // Top: Top 的缩写
            Top,
            // 它们与 `<router-view>` 上的 `name` 属性匹配
            Footer: Footer,
        },
    },
];

my-vue-router/src/App.vue

<router-view name="Top"></router-view>
<h2>******************</h2>
<router-view name="Footer"></router-view>

my-vue-router/src/views/Top.vue

<template>
  <h2>头部</h2>
</template>

my-vue-router/src/views/Footer.vue

<template>
  <h2>尾部</h2>
</template>