当前位置: 首页> 教育> 培训 > Vue路由组件不同布局的用途及使用场景

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

时间:2025/7/11 8:04:45来源:https://blog.csdn.net/xichi_12396/article/details/140925224 浏览次数:0次

  在 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>

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

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

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: