Vue路由组件不同布局的用途及使用场景

  在 Vue.js 中，根据不同的应用场景和页面结构，可以使用不同的布局来组织路由组件。根据提供的布局分类，以下是每种布局的用途和使用场景：

1. basic: 基础布局

• 用途: 用于大多数需要共享头部、侧边栏或其他通用组件的页面。

• 使用场景: 当你的应用具有固定的导航栏、侧边栏、底部等公共部分时，通常会使用这种布局。它是应用中最常见的布局类型。

2. blank: 空白布局

• 用途: 用于不需要任何额外布局元素的页面，比如登录页面、注册页面等。

• 使用场景: 当你希望页面尽可能简洁，不包含任何额外的导航或布局元素时，可以选择空白布局。这种布局适用于不需要公共头部或侧边栏的页面。

3. multi: 多级路由布局

• 用途: 用于多级嵌套路由的情况，即当你的应用结构比较复杂，需要显示多个级别的菜单时。

• 使用场景: 当你的应用具有多层嵌套的路由结构时，例如一级菜单下的二级菜单，二级菜单下的三级菜单等。在这种情况下，除了第一级和最后一级路由之外的中间层级可以使用 multi 布局。

4. self: 作为子路由，使用自身的布局

• 用途: 用于最后一级路由，即没有子路由的页面，它可以使用自身定义的布局。

• 使用场景: 当你有一个路由是最后一级路由，并且它不需要作为其他路由的子路由时，可以使用 self 布局。这种布局通常用于展示单一页面，例如文章详情页、用户资料页等。

示例

如何在 Vue Router 中使用这些布局，示例如下。

路由配置

import { createRouter, createWebHistory } from 'vue-router';
import BasicLayout from './layouts/BasicLayout.vue';
import BlankLayout from './layouts/BlankLayout.vue';
import MultiLevelLayout from './layouts/MultiLevelLayout.vue';
import SelfLayout from './layouts/SelfLayout.vue';
​
const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'home',
      component: BasicLayout, // 使用基础布局
      children: [
        { path: '', component: () => import('./views/Home.vue') }
      ]
    },
    {
      path: '/login',
      name: 'login',
      component: BlankLayout, // 使用空白布局
      children: [
        { path: '', component: () => import('./views/Login.vue') }
      ]
    },
    {
      path: '/multi-level',
      name: 'multi-level',
      component: MultiLevelLayout, // 使用多级路由布局
      children: [
        {
          path: 'first-level',
          name: 'first-level',
          component: () => import('./views/FirstLevel.vue'),
          children: [
            {
              path: 'second-level',
              name: 'second-level',
              component: () => import('./views/SecondLevel.vue'),
              children: [
                {
                  path: 'third-level',
                  name: 'third-level',
                  component: () => import('./views/ThirdLevel.vue')
                }
              ]
            }
          ]
        }
      ]
    },
    {
      path: '/self-layout',
      name: 'self-layout',
      component: SelfLayout, // 使用自身的布局
      children: [
        { path: '', component: () => import('./views/SelfLayoutExample.vue') }
      ]
    }
  ]
});
​
export default router;

布局组件示例

BasicLayout.vue

<template>
  <div>
    <header>Header</header>
    <nav>Navigation</nav>
    <main>
      <router-view />
    </main>
    <footer>Footer</footer>
  </div>
</template>

BlankLayout.vue

<template>
  <div>
    <main>
      <router-view />
    </main>
  </div>
</template>

MultiLevelLayout.vue

<template>
  <div>
    <main>
      <router-view />
    </main>
  </div>
</template>

SelfLayout.vue

<template>
  <div>
    <main>
      <router-view />
    </main>
  </div>
</template>

通过这种方式，可以根据不同的页面和功能需求选择合适的布局。