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>

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