Writing in the front

I have a router.json configuration file to do some simple configuration for routing, and then the routing and the left menu bar can be generated automatically at the same time.

router.json

The configuration items are as follows:

{
  "name": "routerConfig"."menu": [{
    "id": "1".// Route ID, which cannot be repeated
    "name": "home".// Route name
    "path": "/homePage".// Routing path
    "label": "Home page".// Menu title
    "selected": true.// It is selected by default
    "icon": "el-icon-monitor".// Menu displays ICONS
    "open": true.// Enabled by default
    "component": "homePage/homePage.vue".// Component routing
    "children": [ / / submenu
      {
        "id": "3"."name": "getCover"."path": "/getCover"."label": "Cover capture"."selected": false."icon": "el-icon-scissors"."open": false."component": "getCover/getCover.vue"."children": []}]},{"id": "2"."name": "testPage"."path": "/testPage"."label": "Test"."selected": false."icon": "el-icon-setting"."open": false."component": "test/test.vue"."children": []
  },{
    "id": "5"."name": "testMenu"."path": "/testMenu"."label": "Menu test"."selected": false."icon": "el-icon-setting"."open": false."component": "testMenu/testMenu.vue"."children"] : []}}Copy the code

The configuration is mainly divided into two parts, one is for menu generation, the other is for route generation, of course, there are some common parts

Routing generation

import Vue from 'vue'
import VueRouter from 'vue-router'
import ro from "element-ui/src/locale/lang/ro";
Vue.use(VueRouter)
// Import the configuration file router.json
let routerMenu = require('@/config/router.json');
routerMenu = routerMenu.menu;
let menu = [];
// Configure the route
let formatRoute = function (routerMenu,menu){
  for(let i = 0; i < routerMenu.length; i++){
    let temp = {
      path: routerMenu[i].path,
      name: routerMenu[i].name,
      // Pay attention to this
      // When introduced with require, your components will be packaged separately
      // is loaded on demand, only when the route url is accessed
      / / the js
      component: resolve= > require([`@/views/${routerMenu[i].component}`], resolve)
    };
    menu.push(temp);
    if(routerMenu[i].children && routerMenu[i].children.length > 0) {// Recursively generate submenu routesformatRoute(routerMenu[i].children,menu); }}}/ / initialization
formatRoute(routerMenu,menu);
// Redirection Settings
const routes = [
  {
    path: '/'.redirect: '/homePage'},]// Push the generated routing file in
for(let i = 0; i < menu.length; i++)
  routes.push(menu[i]);
  
const router = new VueRouter({
  routes
})

export default router

Copy the code

Menu to generate

<template>
  <div id="leftMenu">

  </div>
</template>

<script>
export default {
  name: "left".data(){
    return{
      menu: []}},methods: {// Find the node by route ID
    findNodeById(node,id){
      for(let i = 0; i < node.length; i++){
        if(id == node[i].id){
          node[i].selected = true;
          if(node[i].children && node[i].children.length > 0) {this.findNodeById(node[i].children,id); } node[i].open = ! node[i].open;if(this.$route.path ! == node[i].path)this.$router.push(node[i].path);
        }else{
          node[i].selected = false;
          if(node[i].children && node[i].children.length > 0) {this.findNodeById(node[i].children,id);
          }else{}}}},// Select the menu node
    chooseNode(id){
      this.findNodeById(this.menu,id);
      let domTree = this.generatorMenu(this.menu,' '.0)
      let leftMenu = document.getElementById('leftMenu');
      leftMenu.innerHTML = domTree;
    },
    // Dynamically generate the menu directory
    generatorMenu(menu,temp,floor){
      for(let i = 0; i < menu.length; i++){
        temp += `<div style="width: max-content">
                    <div class="menuOption" onclick="chooseNode(${menu[i].id})"
                            style="text-indent: ${floor}em;
                            background-color: ${menu[i].selected?'aquamarine':' '}; cursor: pointer; Margin - top: 0.3 rem." > <i class="${menu[i].icon}"></i>
                        ${menu[i].label}`
        if(! menu[i].open && menu[i].children && menu[i].children.length >0){
          temp += `<i style="margin-left: 1rem" class="el-icon-arrow-down"></i>`
        }else{
          if(menu[i].open && menu[i].children && menu[i].children.length > 0){
            temp += `<i style="margin-left: 1rem" class="el-icon-arrow-up"></i>`
          }
        }
        temp += `</div>`
        if(menu[i].open && menu[i].children && menu[i].children.length ! =0){
          temp = this.generatorMenu(menu[i].children,temp,floor+1);
        }
        temp += `</div>`
      }
      returntemp; }},created(){},mounted() {
    window.chooseNode = this.chooseNode;
    let menu = [];
    // Get the routing menu configuration file
    const router = require('@/config/router.json');
    menu = router.menu;
    this.menu = menu;
    let domTree = this.generatorMenu(menu,' '.0)
    let leftMenu = document.getElementById('leftMenu'); leftMenu.innerHTML = domTree; }}</script>

<style scoped>
  #leftMenu{
    min-height: calc(100vh - 44px - 1rem);
    background-color: cornflowerblue;
    text-align: left;
    padding: 0.5 rem 1rem;
    font-size: large;
    font-weight: bold;
  }
  .selectedM{
    background-color: aquamarine;
  }
  .menuOption{
    cursor: pointer;
  }
</style>

Copy the code

The effect

The left menu is automatically generated, click the menu bar will jump to the corresponding routing address, of course, the style is a little ugly, but the style can be adjusted later. This way, when we add a new menu, we just need to configure it in the configuration file, and we can write the page directly, which also saves us a lot of time.