As shown in the figure, vue-element-admina three-level menu is implemented based on the front-end framework. The page only corresponds to the third-level menu and does not have a second-level menu page.
File organization, viewsorganize the file structure under the folder as follows, the third-level menu is the specific .vuefile
Under the first-level menu hxb_sys, create a new index.vuerouting jump for the second-level menu.
Write code inside
<template>
<router-view />
</template>
After preparing these, build the route and openindex.js
The specific code and file path are as shown below, where the second-level menu is in the middle of the first-level menu children, and {},each second-level menu is separated by, and similarly, the third-level page is in childrenthe middle of the second-level menu;
Among them, you need to pay attention to the settings of the second-level menu component: () => import('@/views/hxb_sys/index'), which needs to be linked to index.vuethe
In addition, turn on Always display the second-level menu alwaysShow: true. Otherwise, if the third-level menu has only one .vuepage, the system will not display the second-level menu (it will be skipped).
{
path: '/hxb_sys',
component: Layout,
redirect: '/hxb_sys/branch',
name: 'hxBank',
meta: {
title: '华夏银行',
icon: 'el-icon-s-help'
},
children: [
{
// 二级菜单1
},
{
// 二级菜单2
path: 'homePage', // 首页管理
component: () => import('@/views/hxb_sys/index'), // Parent router-view
name: 'HomePage',
meta: {
title: '首页管理', icon: 'el-icon-s-cooperation' },
alwaysShow: true, // 需要设置该选项
children: [
{
// 三级菜单1
path: 'category',
component: () => import('@/views/hxb_sys/homePage/category'),
name: 'Category',
meta: {
title: '分页列表' , icon: 'el-icon-s-operation'}
},
{
// 三级菜单2
path: 'banner',
component: () => import('@/views/hxb_sys/homePage/banner'),
name: 'Banner',
meta: {
title: 'Banner' , icon: 'el-icon-s-operation'}
},
]
}
]
}
The same applies to multi-level menus. It should be noted that the second and third levels of the four-level menu need to be linked to the index.vuemiddle (I didn't try），component: () => import('@/views/hxb_sys/index')
