I. Introduction
1. The page of the background management system that is often developed is mainly composed of 2 parts, the left menu + the right content. The menu on the left includes the first-level menu and the second-level menu, etc., and the content on the right includes the head breadcrumbs and page details. Finally, the page layout is formed, that is, the Layout layout.
2. Left menu: The left menu is generally a dynamic menu obtained from the interface. There may be only one level menu, or two or three level menus. As long as the left menu has several levels, you must add component: Layout in the routing configuration of the first-level menu. Only after adding it will the list page or other pages we developed be embedded into the Layout layout and displayed in the details of the right page. If you do not configure component: Layout, the developed page will occupy the entire screen when you click on the left menu to jump, and the effect we want cannot be achieved.
3. Contents on the right side: header: the right header usually contains routing breadcrumbs (system management/user management) + user name + exit + change password. Page details: Page details are generally placed on the developed pages, such as the list page and detail page of user management.
As shown below:
Two.route routing configuration
1. Routing configuration with submenus is very common, just add childList, so I won’t give an example. Let’s give an example of routing configuration without submenus (that is, only the first-level menu) 2. First-level menu
configuration
import Layout from '@/components/layout'
export default [
{
path: '/subject',
component: Layout, //重点，必须要加
redirect: '/subject/list',
meta: {
title: 'xxx配置',
level: 1,
name: 'SUBJECT'
},
children: [{
path: 'list',
name: 'list',
component: () => import("@/xx/xxx/index.vue"), //页面详情
meta: {
title: '配置',
level: 1,
name: 'SUBJECT'
}
}]
}
]