基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之布局菜单嵌套路由（三）

最新推荐文章于 2023-11-21 13:22:01 发布

原创

最新推荐文章于 2023-11-21 13:22:01 发布 · 601 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript #html #js #node.js

本文介绍了一个基于Vue和Quasar框架的SPA项目布局菜单实现方法。通过嵌套路由和q-tree控件，实现了导航栏、菜单及主体内容区域的设计，并展示了如何根据不同页面需求控制后退按钮的显示。

基于Vue和Quasar的前端SPA项目实战之布局菜单（三）

回顾

通过上一篇文章基于Vue和Quasar的前端SPA项目实战之用户登录（二）的介绍，我们已经完成了登录页面，今天主要介绍布局菜单的实现。

UI界面

效果

布局菜单首页
首页

布局菜单展开
业务数据菜单展开

布局菜单设置
设置页面

说明

布局主页分为三个部分，

最上面为导航栏，主要包括刷新按钮，后退按钮，用户信息等内容。
左边为菜单，包括业务数据，元数据，系统三个一级菜单。业务数据菜单的二级菜单为表名称，元数据菜单包括序列号、表、关系三个二级菜单，系统菜单包括设置和关于两个二级菜单。
右边为页面主体部分。

布局

嵌套路由

通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如：
设置Setting页面和关于About页面切换的时候，导航和菜单部分都不变，变化的是主体部分，可以通过嵌套路由实现。

/about                                /setting
+------------------+                  +-----------------+
| nav             |                   | nav             |
| +--------------+ |                  | +-------------+ |
| | About        | |  +------------>  | | Setting     | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

MainLayout

文件为：src/layouts/MainLayout.vue

<q-page-container>
  <router-view />
</q-page-container>

其中<router-view />对应上图About和Setting部分。

定义路由

const routes = [
  {
   
   
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      {
   
    path: '', component: () => import('p

最低0.47元/天解锁文章