vue中的布局组件

在 Vue.js 中，布局组件是一种特殊类型的组件，用于定义应用程序的常见布局结构。这些布局结构可能包括导航栏、侧边栏、页脚等，而页面的主要内容则通过 <router-view> 组件在各个路由视图中进行动态替换。

下面是一个简单的布局组件示例：

<template>
  <div>
    <header>
      <nav>
        <router-link to="/">Home</router-link>
        <router-link to="/about">About</router-link>
      </nav>
    </header>

    <main>
      <router-view/>
    </main>

    <footer>
      <p>© 2024 My Website</p>
    </footer>
  </div>
</template>

在这个例子中，布局组件包含一个头部（包含导航链接）、一个主体部分（内容由 <router-view> 动态填充）和一个页脚。

此布局组件可以在路由配置中使用，如下所示：

const routes = [
  {
    path: '/',
    component: () => import('@/layouts/Default.vue'),
    children: [
      {
        path: '',
        component: () => import('@/views/Home.vue')
      },
      {
        path: '/about',
        component: () => import('@/views/About.vue')
      }
    ]
  }
]

在这个路由配置中，所有的子路由（Home 和 About 视图）都将使用 Default.vue 布局组件。具体的页面内容将在 <router-view> 的位置动态插入。

这种方式可以帮助我们在不同的页面视图中重用相同的布局，同时根据不同的路由展示不同的内容。