vue-router 如何实现页面布局layout模式

Vue Router 可以通过结合组件化的前端架构和动态路由加载来实现页面布局（Layout 或称为 Layout 组件模式）。这种模式通常用于统一管理页面的顶部导航、侧边栏和主要内容区域。以下是如何实现这个模式的一般步骤：

1. **创建 Layout 组件**：
- 创建一个名为 `AppLayout.vue` 或类似的父组件，这个组件将会包裹所有的内容区域。
- 在 `AppLayout.vue` 中，定义通用的 HTML 结构，包括 header、sidebar 和 main 区域。

   <template>
     <div id="app">
       <header>...</header>
       <aside>...</aside>
       <main>
         <router-view></router-view> <!-- 这里是动态渲染路由的内容 -->
       </main>
     </div>
   </template>

2. **配置路由守卫**：
- 针对 `Layout` 组件，可能需要在全局或部分路由前定义一个守卫，比如 `beforeEach`，来控制哪些路由能够进入 layout。
- 在守卫中，你可以判断当前路由是否符合显示布局的要求，例如只对特定的菜单权限打开侧边栏等。

3. **动态路由**：
- 在 Vue Router 的 `routes` 数组中，定义每个具体页面的路由，这些路由应该包含它们自己的组件（通常是 `components` 属性指向的组件），而不是直接放在 `children` 里面。

4. **应用路由**：
- 在主入口文件（通常是 `main.js` 或 `src/App.vue`）中，配置 Vue Router，设置 `default` 值为 `AppLayout` 组件，同时配置路由映射。

5. **路由切换**：
- 当用户导航到不同路由时，`<router-view>` 将根据路由配置动态地替换 `main` 区域中的内容。

例子：

// router.js
import { createRouter, createWebHistory } from 'vue-router';
import AppLayout from '@/components/AppLayout.vue';

const routes = [
  { path: '/', component: HomeView },
  { path: '/about', component: AboutView, meta: { layout: true } },
  { path: '/contact', component: ContactView, meta: { layout: false } }, // 不显示 layout
];

export default createRouter({
  history: createWebHistory(),
  routes,
});

// 注意：`meta.layout` 属性用于标记需要使用 Layout 组件的路由

// 主入口文件（main.js）
import router from './router';

new Vue({
  el: '#app',
  router,
  components: {
    AppLayout,
    // 其他自定义组件
  },
});

现在，只有 `/about` 路由会显示完整的布局，而 `/contact` 则不会显示侧边栏和顶部导航。通过这种方式，你可以灵活地管理页面的整体布局。