The routing configuration

Route Configuration

Familiar with the concepts of static routes and dynamic routes

  1. Static route: pre-written route configuration (routes that can be accessed as long as the page is opened)
  2. Dynamic routing: Routes can be accessed only when the user has the permission of the routing module (controlled by the user’s permission).
  3. Dynamic routing permissions are determined by user-related data



Routing Configuration

** Target ** removes redundant pages attached to the base template and removes redundant routing configurations

  • Delete redundant route configurations**src/router/index.js**
// Static route table => Static route (don't need permission to access)
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'}}},// If no page is matched, go to 404
  // { path: '*', redirect: '/404', hidden: true }
]
Copy the code

In the above code, we only reserved [login page /404/ home page], and we found that after deleting the other pages, the data of the left navigation menu was only left with the home page

Note:

  1. The route mapping affects the display of the left menu
  2. If the route mapping contains hidden:true, the route menu is not displayed on the left. Otherwise, the route menu is displayed

Set up the service module page

** Goal ** : Quick setup – Regular business module of HR project – home page

├ ─ ─ views ├ ─ ─ the approvals# approval├ ─ ─ attendances# attendance├ ─ ─ dashboard# Home page - already available├ ─ ─ the departments# Organizational Structure├ ─ ─ employees# employees├ ─ ─ login# Login -- already├ ─ ─ the permission# Permission management├ ─ ─ salarys# wages├ ─ ─ setting# Company Settings├ ─ ─ social# social security├ ─ ─ 404# 404 -- Already available
Copy the code
  • You can run commands to quickly create related directories
mkdir approvals attendances departments employees permission salarys setting social
Copy the code
  • The contents of each module can first be created according to a standard template, as shown below
<div class="dashboard-container"> <div class="app-container"> </div> </div> </template> <script> export default { } </script> <style lang="scss" scoped> </style>Copy the code

In summary, how to quickly create multiple folders? Mkdir Folder name (multiple names separated by Spaces)

Configure routing rules for modules

Destination: Configure routing rules

  • We break it up here, one routing rule per module, using the organizational structure DEPARTMENTS as an example
// Home page module
{
  path: '/'.component: Layout,
  redirect: '/dashboard'.children: [{path: 'dashboard'.name: 'dashboard'.component: () = > import('@/views/dashboard/index'),
      meta: { title: 'home'.icon: 'dashboard'}}},// Organizational architecture module
{
  path: '/departments'.component: Layout,
  children: [{path: ' '.name: 'departments'.component: () = > import('@/views/departments'),
      meta: { title: 'Organizational Structure'.icon: 'dashboard'}}},Copy the code

conclusion

  1. All the first-level routing components in the left menu are Layout
  2. The components displayed in the right area are actually second-level routes

Note: If the path of the children route is an empty string, the secondary route is displayed by default

Why is this configured? To further split the routing module (easier to maintain as the project gets larger)

Left menu logic analysis

Objective: To become familiar with the rendering logic of the left menu

**src/layout/components/Sidebar/SidebarItem.vue**

  • As long as there is a rule, there is an extra menu, because the menu items are dynamically rendered by traversal routing rules
<el-menu
  :default-active="activeMenu"
  :collapse="isCollapse"
  :background-color="variables.menuBg"
  :text-color="variables.menuText"
  :unique-opened="false"
  :active-text-color="variables.menuActiveText"
  :collapse-transition="false"
  mode="vertical"
>
  <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
</el-menu>
Copy the code
computed: {
  routes() {
    // this.$router-options. routes indicates the configured route mapping
    // This API is provided by vue-Router
    return this.$router.options.routes
  },
}
Copy the code
  • In the routing rule, you can configure a hidden property, and set true to not render menus in the future (in addition to hidden also related to children property)
{
  path: '/login'.component: () = > import('@/views/login/index'),
  hidden: true
},
Copy the code
  • Here the render menu is processedLevel 1 Navigation Menu 和 Secondary Navigation MenuWe don’t need secondary navigation here,You can comment it out
<template> <div v-if="! item.hidden">Copy the code

Summary: Obtain all the route mapping arrays through the VUe-Router API, and dynamically traverse to form the left menu. Control whether the route mapping is displayed in the left menu list through the hidden property.

About the structure of the left menu

  • Menu display conditions: Hidden and Children decide together
  • The nested relationships of components

    • The router-link tag is rendered by the dynamic component

    • Dynamic components are reanalyzed separately

<el-menu> <router-link :to='to'> <el-menu-item> <! -- The item component displays the menu icon and title text --> <item></item> </el-menu-item> </router link> </el-menu>Copy the code

Conclusion:

  1. A single menu is actually an item. vue component that displays data from an object that is a secondary route map
  2. The hop of a route is controlled by the app-link component. Currently, you can understand the function of router-link
  3. The next step is to look at the internal implementation of the AppLink component: the dynamic component

Template Tag Usage

Goal: Familiarize yourself with the template tag

<div v-if="isShow">tom</div> <div v-if="isShow">jerry</div> <! <div> Tom </div> <div> Jerry </div> </template>Copy the code

Conclusion: The template tag is a convenient way to control the effects of a set of tags.

Basic usage of dynamic components

Objective: To become familiar with the basic rules of use for dynamic components

import MyInfo from './MyInfo.vue'
import MyMsg from './MyMsg.vue'
export default {
  name: 'Dashboard'.components: {
    MyInfo,
    MyMsg
  },
  data () {
    return {
      isShow: true.currentComponent: 'my-msg'}},Copy the code
<! -- Dynamic component: currentComponent displays the component whose currentComponent property value is the component name --> <! -- <keep-alive> <component :is="currentComponent" /> </keep-alive> <button @click="currentComponent=&quot; my-info&quot;" >Info</button> <button @click="currentComponent=&quot; my-msg&quot;" >Msg</button>Copy the code

Conclusion:

  1. The value of is is the name of the component to render, and the final rendering result is only the template of the component itself, without rendering the Component tag
  2. Dynamic components facilitate caching of a class of components
  • The is attribute value of a dynamic component supports native HTML elements
<! -- Dynamic component is attribute values support native DOM tags --> <! <component :is="currentComponent" :href="curl" :class="{active: </component> <! <component :is="currentComponent" v-bind="obj"> </component>Copy the code
  data () {
    return {
      isShow: true.// currentComponent: 'my-msg'
      currentComponent: 'a'.curl: 'http://itcast.cn'.obj: {
        href: 'http://itcast.cn'.class: 'active'}}},Copy the code

Conclusion:

  1. The is attribute value of a dynamic component supports native HTML elements
  2. The Component tag can bind properties to dynamic components or HTML tags
  3. Vue allows you to bind multiple properties from one object at a time (v-bind='obj')




Summary: The app-link component wraps a router-link tag around the el-menu-item component

  1. The slots of components are in basic use
  2. Dynamic components
  3. V-bind can directly assign a value to an object and dynamically bind each attribute in the object

Configure the menu text and icon icon

Goal: Configure the menu text and menu icon

  1. Copy the SVG icon into the project: This resource is already available in the Material SVG directory. Please place all SVG in this directory**src/icons/svg**directory
  2. Modify the icon name: refer to the online address for the specific icon name
{
  path: '/departments'.component: Layout,
  children: [{path: ' '.name: 'departments'.component: () = > import('@/views/departments'),
      meta: { title: 'Organizational Structure'.icon: 'tree'}}},Copy the code
  • Modules correspond to the icon reference table
├── dashboard # dashboard # tree Heavy ├── Employees # people Heavy ├── setting # setting heavy ── salarys # money heavy ── Social # Table Exercises # Skill Exercises # Tree-table Exercises # Permission # lockCopy the code

Conclusion:

  1. Copy the SVG icon file into the ICONS/SVG directory
  2. Change the value of the icon attribute in the meta of the route map to the SVG file name

Splitting a Routing Module

Target: Create a split routing module

You have successfully added a routing module, but it would be inappropriate to write all the routes in one file, so remove the module

  • Directory structure of the service routing module
Vuvus.js: Tips for Getting out of the road Tree - Table Exercises ── attendance.js # Work attendance icon: Skill ├── Departments.js # Exercises ── departments.js For example, for example, for example, for example, for example, for example, for example, for example, for example, for example, for example, for example, for example, for example, for example, for example, for example, for example, for example, for example, for example, for example, for example, for example, for example, for example, for example, for example, for example Setting ├── social.js # Social Security Icon: TableCopy the code
  • Quick file creation command
touch approvals.js attendances.js departments.js employees.js permission.js setting.js salarys.js social.js
Copy the code
  • Refactoring file contents
// Organizational structure module import Layout from'@/layout'

export default {
  path: '/departments',
  component: Layout,
  children: [
    {
      path: ' ',
      name: 'departments',
      component: () => import('@/views/departments'),
      meta: { title: 'Organizational Structure', icon: 'tree'}}}]Copy the code

Summary: The routes for each business module are split separately and then imported and configured

  1. Batch create files based on the Touch command
  2. Split routing modules
  3. Create components for different modules

Dynamic and static routes are merged

** Target ** : Temporarily merges the routing tables of static and dynamic routes

  • What is a temporary merger?

In the first section, we mentioned that dynamic routing requires permissions to access, but dynamic routing access of permissions is more complex.

We’ll talk more about this later, so to see the effect better, we can first combine static and dynamic routes, which means that all routes are allowed by default

Route main file ** SRC /router/index.js**

// Introduce rules for multiple modules
import approvalsRouter from '@/router/modules/approvals'
import departmentsRouter from '@/router/modules/departments'
import employeesRouter from '@/router/modules/employees'
import permissionRouter from '@/router/modules/permission'
import attendancesRouter from '@/router/modules/attendances'
import salarysRouter from '@/router/modules/salarys'
import settingRouter from '@/router/modules/setting'
import socialRouter from '@/router/modules/social'

// Dynamic routing table => Dynamic routing table => Dynamic routing table
export const asyncRoutes = [
  approvalsRouter,
  departmentsRouter,
  employeesRouter,
  permissionRouter,
  attendancesRouter,
  salarysRouter,
  settingRouter,
  socialRouter
]

const createRouter = () = > new Router({
  // mode: 'history', // require service support
  scrollBehavior: () = > ({ y: 0 }), // Manage the scrolling behavior so that the page switches back to the top
  routes: [...constantRoutes, ...asyncRoutes] // Temporarily merge dynamic and static routes
})
Copy the code

Summary: Static route configuration and dynamic route configuration are handled separately

  1. A combination of arrayscosnt arr = [...arr1, ...arr2]
  2. Dynamic routes need to be controlled based on user rights

Handle highlight activation

Objective: To control click route link highlighting

When the left menu is selected, an is-active class is added, which can be overwritten in sidebar.scss

li.is-active {
  background-color: #fff! important;
  .svg-icon {
    color: #43a7fe;
  }
  span {
    color: #43a7fe; }}Copy the code

Summary: After clicking on the left menu, an IS-active class name is automatically added. We need to provide the corresponding style.

Note: The behavior highlighted in the click menu is the behavior of the element-UI menu component (the IS-active class name is automatically added by the Element-UI).

Router-link-exact -active router-link-active is used for router-link-active