Front End SPA Project Layout Menu based on Vue and Quasar (III)
review
Through the last article based on Vue and Quasar front-end SPA project actual combat user login (ii) introduction, we have completed the login page, today mainly introduces the implementation of the layout menu.
UI
The effect
Home page
The business data menu expands
Settings page
instructions
The layout home page is divided into three sections,
- The top is the navigation bar, mainly including the refresh button, back button, user information and other content.
- The left side is the menu, including business data, metadata, system three level menus. The second-level menu of the service data menu is the table name, the metadata menu includes the serial number, table, and relationship, and the system menu includes the Settings and about two second-level menus.
- On the right is the main part of the page.
layout
Embedded routines by
It is usually composed of several layers of nested components. Similarly, each section of dynamic path in URL also corresponds to nested components of each layer according to a certain structure. For example, when Setting the page and switching the About page, navigation and menu parts remain unchanged, but the main part changes, which can be realized by nesting routines.
/about /setting
+------------------+ +-----------------+
| nav | | nav |
| +--------------+ | | +-------------+ |
| | About | | +------------> | | Setting | |
| | | | | | | |
| +--------------+ | | +-------------+ |
+------------------+ +-----------------+
Copy the code
MainLayout
File is: the SRC/layouts/MainLayout vue
<q-page-container>
<router-view />
</q-page-container>
Copy the code
Where
Define the routing
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")}}]Copy the code
This.$route.meta. IsAllowBack = this.$route.meta. Then set the global Vuex state config/isAllowBack value.
Computed properties
<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; }}}Copy the code
In MainLayout.vue, q-bTN is bound with the isAllowBack attribute computed so that you can control whether the back button is displayed. Home page does not need to back, Settings page and about page need to back. The back button is designed to adapt to different browsers. It does not depend on the browser’s back function, such as H5 page full screen or embedded in the Cordova shell.
The menu
controls
<q-tree
selected-color="primary"
:nodes="allMenu"
:selected.sync="selected"
@update:selected="onMenuClickAction()"
ref="qTreeProxy"
node-key="labelKey"
default-expand-all
no-connectors
/>
Copy the code
Menu using q-Tree control, menu content is including fixed part and dynamic part.
list: async function(page, rowsPerPage, search, query) {
var res = await metadataTable.list(page, rowsPerPage, search, query);
return res.data;
},
Copy the code
The business data is dynamically displayed according to the form list. The form is queried by metadataTableService’s list method and then dynamically rendered.
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);
Copy the code
Methods this $refs. QTreeProxy. SetExpanded can control menu.
summary
This paper mainly introduces the nested routines and menu functions, using router-view and Q-tree, and then realize the setting page and about the page function. The corresponding functions of other menus are temporarily empty, and the sequence number functions will be further introduced from the metadata menu.
The demo presentation
Website address: crudapi. Cn test address: demo. Crudapi. Cn/crudapi/log…
Attached source code address
Making the address
Github.com/crudapi/cru…
Gitee address
Gitee.com/crudapi/cru…
Due to network reasons, GitHub may be slow, so you can access Gitee instead and update the code synchronously.