Vue布局组件、路由的children属性

在Vue项目中，布局组件和页面是通过路由配置和组件嵌套来拼起来的。布局组件是用来定义网站的整体结构和布局，而页面组件是用来显示具体的内容。

以下是一个简单的示例来说明如何将布局组件和页面组件拼起来：

创建布局组件 Layout.vue：

<template>
  <div>
    <header>
      <!-- 布局组件中的头部内容 -->
      <h1>My Website</h1>
    </header>
    <main>
      <!-- 使用 <router-view></router-view> 来显示页面组件 -->
      <router-view></router-view>
    </main>
    <footer>
      <!-- 布局组件中的页脚内容 -->
      <p>© 2023 My Website. All rights reserved.</p>
    </footer>
  </div>
</template>

创建页面组件 Home.vue：

<template>
  <div>
    <h2>Welcome to Home Page</h2>
    <!-- 页面组件的内容 -->
    <p>This is the home page content.</p>
  </div>
</template>

创建路由配置 router.js：

import Vue from 'vue';
import Router from 'vue-router';
import Layout from './components/Layout.vue';
import Home from './components/Home.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      component: Layout, // 使用布局组件作为根组件
      children: [
        {
          path: '',
          component: Home, // 使用页面组件作为子组件
        },
      ],
    },
  ],
});

在上面的示例中，我们创建了一个名为 Layout.vue 的布局组件，其中包含了头部、页脚以及一个 <router-view></router-view> 标签用于显示页面组件。然后，我们创建了一个名为 Home.vue 的页面组件，用于显示首页内容。

接着，在路由配置中，我们将 Layout.vue 作为根组件，并使用 children 属性来嵌套 Home.vue 作为子组件。

当访问网站根路径 / 时，Vue Router 会加载 Layout.vue 布局组件，并且通过 <router-view></router-view> 标签，加载 Home.vue 页面组件，将其嵌套在 Layout.vue 布局组件的 main 区域内。这样，页面组件的内容就被正确地拼接到布局组件上，形成了完整的页面。

这种组件嵌套和路由配置的方式使得我们可以轻松地在布局中切换不同的页面内容，实现整个网站的页面切换效果。