「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之布局菜单(三)

简介: 本文主要介绍了嵌套路由和菜单功能,用到了router-view和q-tree,然后实现了设置页面和关于页面功能。

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

回顾

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

UI界面

效果

布局菜单首页
首页

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

布局菜单设置
设置页面

说明

布局主页分为三个部分,

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

布局

嵌套路由

通常由多层嵌套的组件组合而成。同样地,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('pages/Index.vue') },
      {
        name: "about",
        path: "about",
        meta: { isAllowBack: true },
        component: () => import("pages/About.vue")
      },
      {
        name: "setting",
        path: "setting",
        meta: { isAllowBack: true },
        component: () => import("pages/Setting.vue")
      }
    ]
  }

其中,meta表示路由元信息,isAllowBack字段用于表示是否可以后退,在对应的component页面渲染的时候通过this.$route.meta.isAllowBack获取值,然后设置全局Vuex状态config/isAllowBack的值。

computed计算属性

<q-btn
  v-show="isAllowBack === true"
  flat
  dense
  round
  @click="goBack"
  icon="arrow_back_ios"
  aria-label="Back"
>
</q-btn>

computed: {
  isAllowBack: {
    get() {
      return this.$store.state.config.isAllowBack;
    }
  }
}

MainLayout.vue中通过computed计算属性isAllowBack绑定q-btn,这样可以控制后退按钮是否显示。首页不需要后退,设置页面和关于页面就需要后退。后退按钮主要目的是适应不同的浏览器,不依赖浏览器的后退功能,比如H5页面全屏或者嵌入到Cordova壳子里面的时候就非常有用了。

菜单

控件

<q-tree
  selected-color="primary"
  :nodes="allMenu"
  :selected.sync="selected"
  @update:selected="onMenuClickAction()"
  ref="qTreeProxy"
  node-key="labelKey"
  default-expand-all
  no-connectors
/>

菜单用到了q-tree控件,菜单的内容是包括固定部分和动态部分。

list: async function(page, rowsPerPage, search, query) {
  var res = await metadataTable.list(page, rowsPerPage, search, query);
  return res.data;
},

其中业务数据是根据表单列表动态显示的,通过metadataTableService的list方法查询表单,然后动态渲染。

const tables = await metadataTableService.list(1, 9999);
for (let i = 0; i < tables.length; i++) {
  let table = tables[i];
  this.businessMenu.children.push({
      label: table.caption,
      labelKey: this.getBussinessPath(table.name),
      icon: "insert_chart_outlined"
  });
}

this.allMenu.push(this.businessMenu);
this.allMenu.push(this.metadataMenu);
this.allMenu.push(this.systemMenu);

this.$refs.qTreeProxy.setExpanded("business", true);
this.$refs.qTreeProxy.setExpanded("metadata", true);
this.$refs.qTreeProxy.setExpanded("system", true);

方法this.$refs.qTreeProxy.setExpanded可以控制菜单展开。

小结

本文主要介绍了嵌套路由和菜单功能,用到了router-view和q-tree,然后实现了设置页面和关于页面功能。其它菜单对应的功能暂时为空,后续会从元数据菜单开始进一步介绍序列号功能。

demo演示

官网地址:https://crudapi.cn
测试地址:https://demo.crudapi.cn/crudapi/login

附源码地址

GitHub地址

https://github.com/crudapi/crudapi-admin-web

Gitee地址

https://gitee.com/crudapi/crudapi-admin-web

由于网络原因,GitHub可能速度慢,改成访问Gitee即可,代码同步更新。

目录
相关文章
|
18小时前
|
Web App开发 前端开发 JavaScript
前端开发的秘密武器:这些工具让你轻松应对各种复杂布局!
【10月更文挑战第31天】前端开发充满挑战,尤其是在处理复杂布局时。本文介绍了几种关键工具和技术,如HTML和CSS基础、Firefox开发者工具、Visual Studio Code以及Vue、React和Angular等前端框架,帮助开发者高效应对复杂布局,提升代码质量和用户体验。
5 2
|
6天前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】React与Vue:前端框架的巅峰对决与选择策略
|
6天前
|
前端开发 JavaScript 数据管理
React与Vue:两大前端框架的较量与选择策略
【10月更文挑战第23天】React与Vue:两大前端框架的较量与选择策略
|
12天前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
19天前
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
53 4
|
6天前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】 React与Vue:前端框架的巅峰对决与选择策略
|
13天前
|
前端开发 JavaScript API
2025年前端框架是该选vue还是react?有了大模型-例如通义灵码辅助编码,就不用纠结了!vue用的多选react,react用的多选vue
本文比较了Vue和React两大前端框架,从状态管理、数据流、依赖注入、组件管理等方面进行了详细对比。当前版本和下载量数据显示React更为流行,但Vue在国内用户量增长迅速。Vue 3通过组合式API提供了更灵活的状态管理和组件逻辑复用,适合中小型项目;React则更适合大型项目和复杂交互逻辑。文章还给出了选型建议,强调了多框架学习的重要性,认为技术问题已不再是选型的关键,熟悉各框架的最佳实践更为重要。
|
19天前
|
JSON 前端开发 JavaScript
Vue微前端新探:iframe优雅升级,扬长避短,重获新生
Vue微前端新探:iframe优雅升级,扬长避短,重获新生
75 0
|
19天前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
97 0
|
19天前
|
JavaScript 前端开发 应用服务中间件
Vue开发中,在实现单页面应用(SPA)前端路由时的hash模式和history模式的区别及详细介绍
Vue开发中,在实现单页面应用(SPA)前端路由时的hash模式和history模式的区别及详细介绍
20 0