Routing page finishing
目标Remove redundant pages that come with the base template
The basic template helps us build some pages in advance, let's organize them in this chapter
First of all, we need to know how the page routing of such a large-scale mid-stage project is set up.
simple project
current project structure
Why split it into several routing modules?
Because there are many pages in complex middle-end projects, it is impossible to concentrate all businesses on one file for management and maintenance, and most importantly, the front-end page is mainly divided into two parts, one part is accessible to everyone Yes, part of it is only accessible to authorized personnel, splitting multiple modules for better control
Static Routing and Dynamic Routing
注意The dynamic routing here is not a dynamic routing for routing parameters
After understanding the routing design, let's sort out the current routing
Delete redundant static routing table src/router/index.js
/**
* constantRoutes
* a base page that does not have permission requirements
* all roles can be accessed
*/
export const constantRoutes = [
{
path: '/login',
component: () => import('@/views/login/index'),
hidden: true
},
{
path: '/404',
component: () => import('@/views/404'),
hidden: true
},
{
path: '/',
component: Layout,
redirect: '/dashboard',
children: [{
path: 'dashboard',
name: 'Dashboard',
component: () => import('@/views/dashboard/index'),
meta: { title: 'Dashboard', icon: 'dashboard' }
}]
},
// 404 page must be placed at the end !!!
{ path: '*', redirect: '/404', hidden: true }
]
In the above code, we only reserved the login page/404/home page
And we found that after deleting other pages, the data in the left navigation menu is only the home page
This is because the data of the left navigation menu comes from routing information
Remove redundant routing components
Only keep the content of the above three routing components, and then gradually increase
Similarly, in the api directory, there is redundant api-table.js and deleted together
submit code
本节任务: Complete the organization of the business routing page
Quick construction of business module pages
目标: Quickly build regular business modules for HR projects
Page and routing files for new modules
Up to now, we have completed the basic outline of a middle platform system, as shown in the figure
Next, we can quickly build the corresponding pages and routes for the modules that human resources need to do
├── dashboard # Home ├── login # Login ├── 404 # 404 ├── departments # Organizational Structure ├── employees # Employees ├── setting # Company Settings ├── salarys # Salary ├── social # Social Security ├── attendances # attendance ├── approvals # approval ├── permission # authority management
According to the structure in the above figure, under the views directory, create a corresponding directory and create a new one for each module index.vueas the home page of each module
Quickly create new folders
$ mkdir departments employees setting salarys social attendances approvals permission
The content of each module can be established according to the standard template first, such as
staff
<template>
<div class="dashboard-container">
<div class="app-container">
<h2>
员工
</h2>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
After establishing the corresponding page according to the above standards, the next step is to establish the routing rules for each module
Routing module directory structure
├── router # Routing directory ├── index.js # Routing main file ├── modules # Module directory ├── departments.js # Organizational structure ├── employees.js # Staff ├── settings.js # Company settings ├── salarys.js # Salary ├── social.js # Social Security ├── attendances.js # Attendance ├── approvals.js # Approval ├── permissions.js # Authority management
Quick create command
$ touch departments.js employees.js settings.js salarys.js socials.js attendances.js approvals.js permissions.js // mac才可以
Set routing rules for each module
The content exported by each module represents the routing rules under the module
Such as employees employees.js
// Export routing rules belonging to employees
import Layout from '@/layout'
// { path: '', component: '' }
// Each sub-module is actually the outer layer of the layout component located in the secondary route of the layout
export default {
path: '/employees', // path
name: 'employees', // add a name to the routing rule
component: Layout, // component
// configure the routing table of the secondary road
children: [{
path: '' , // Here, when the path of the second-level route is not written, it means that the route is the default route of the current second-level route
component: () => import('@/views/employees'),
// The routing meta information is actually It is the object that stores data. We can put some information here.
meta: {
title: 'Employee Management' // The properties in the meta property can be defined at will, but why use title here, because the left navigation will read our route The title in the meta is used as the display menu name
}
}]
}
When When your access address is /employees, the layout component will be displayed. At this time, the default component of your secondary route will also be displayed.
In the above code, we used the meta attribute, which is an object, which can be used to place custom attributes, mainly used to read some configurations and parameters, and it is worthwhile: our
注意meta is written on the second-level default route, and It is not a first-level route, because when there is a second-level route, the access to the current routing information is二级默认路由
Based on the above design, everyone quickly builds the above modules
submit code
本节任务: Complete the rapid construction of pages and routes of other modules
Static routing and dynamic routing are temporarily merged to form the left menu
目标: Temporarily merge the routing tables of static routing and dynamic routing
What is temporary merger?
In the first section, we have said that dynamic routing requires permission to access, but the dynamic routing access of permissions is very complicated, we will explain it later, so in order to better see the effect, we can Combine static routing and dynamic routing first
routing master file src/router/index.js
// 引入多个模块的规则
import approvalsRouter from './modules/approvals'
import departmentsRouter from './modules/departments'
import employeesRouter from './modules/employees'
import permissionRouter from './modules/permissions'
import attendancesRouter from './modules/attendances'
import salarysRouter from './modules/salarys'
import settingRouter from './modules/settings'
import socialRouter from './modules/social'
// 动态路由
export const asyncRoutes = [
approvalsRouter,
departmentsRouter,
employeesRouter,
permissionRouter,
attendancesRouter,
salarysRouter,
settingRouter,
socialRouter
]
const createRouter = () => new Router({
// mode: 'history', // require service support
scrollBehavior: () => ({ y: 0 }), // Manage scrolling behavior if there is scroll switching Bring the page back to the top
routes: [...constantRoutes, ...asyncRoutes] // temporarily merge all routes
})
Through the above operations, we merged static routing and dynamic routing
When we merged the permissions, we were surprised to find that the page effect has been left navigation menu = "routing page
This is the encapsulation of the left navigation menu in the previous basic template
submit code
本节任务: temporarily merge static routing and dynamic routing to form the left menu
The display logic of the left menu, set the menu icon
目标Analyze the display logic of the left menu, and set the icon content of the left navigation menu
In the previous section, we integrated the routing, and the menu displayed the content. Why?
Read left menu code
We found that the logic shown in the figure
Since this project does not require the display of the second-level menu, the code is processed and only the first-level menu routing is retained
src/layout/components/Sidebar/SidebarItem.vue
<template>
<div v-if="!item.hidden">
<template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
<item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
</el-menu-item>
</app-link>
</template>
<!-- <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
<template slot="title">
<item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
</template>
<sidebar-item
v-for="child in item.children"
:key="child.path"
:is-nest="true"
:item="child"
:base-path="resolvePath(child.path)"
class="nest-menu"
/>
</el-submenu> -->
</div>
</template>
本节注意: Found through the code, when the attribute in the route hiddenis true, it means that the route is not displayed in the left menu
At the same time, we found the left menu to be uncoordinated due to the lack of icons. In this project, our icons use SVG components
The icon on the left menu actually reads the icon of the meta attribute, and this icon needs to be placed in src/icons/svgthe directory in advance
This resource is already provided in the menu svg directory, please put all the svg in this directory into
src/icons/svgthe directory
The specific icon name can refer to the online address
functional is true, indicating that the component is a functional component
Functional components: no data state, no responsive data, only receive props attribute, no this, it is just a function
The corresponding icon of the module
├── dashboard # dashboard ├── departments # tree ├── employees # people ├── setting # setting ├── salarys # money ├── social # table ├── attendances # skill ├── approvals # tree-table ├── permission # lock
Set the icon according to the corresponding icon
本节任务：Understand the generation logic of the left menu and set the icon of the left menu