/**
 * 
 * @param {Array} allRoutes — весь список страниц
 * @param {Array} menuList — список меню, полученный с сервера
 */
const recursionRoutes = (allRoutes = [], menuList = []) => {
    let userRoutes = [];//результат сравнения будет сохранён в этом массиве
    allRoutes.forEach(item => {
        menuList.forEach(v => {
            if (item.meta.name === v.name) {
                if (v.children && v.children.length > 0) {
                    item.children = recursionRoutes(item.children, v.children)
                }
                userRoutes.push(item)
            }
        })
    })
    return userRoutes
}

export default recursionRoutes

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import { getMenuList } from "@/api"
import DynamicRoutes from "@/router/DynamicRoutes" //динамические маршруты
import router from "@/router" //импорт роутера
//импорт функции recursionRoutes для обработки рекурсии пользовательских маршрутов
import recursionRoutes from "../uitils/recursionRoutes"
//импорт allRoutes
import allRoutes from "../router/allRoutes"
export default new Vuex.Store({
  state: {
    sideMenu: []
  },
  mutations: {
    SET_SIDEMENU(state, payload) { //установка пользовательского меню
      state.sideMenu = payload
      //находим маршрут "/" так как все страницы являются его дочерними
      let target = DynamicRoutes.find(item => item.path === '/')
      target.children = [...state.sideMenu]
      console.log(DynamicRoutes)
      router.addRoutes(DynamicRoutes)
    },
    CLEAR_SIDEMENU(state) {
      state.sideMenu = []
    }
  },
  actions: {
    async FETCH_MENULIST({ commit }) { //получение пользовательского меню
      //запуск асинхронного запроса для получения пользовательского меню
      let res = await getMenuList();
      if (res && res.data) { //получен результат
        //рекурсивно получаем пользовательские маршруты
        let userMenu = recursionRoutes(allRoutes, res.data.menuList)
        commit("SET_SIDEMENU", userMenu)
      }
    }
  },
  modules: {
  }
})

<template>
  <div class="subMenu">
    <div v-for="item in sideMenu">
      <!-- имеет подменю -->
      <el-submenu index="1"
                  v-if="item.children&&item.children.length>0">
        <template slot="title">
          <i class="el-icon-s-custom"></i>
          <span slot="title">{{item.meta.name}}</span>
        </template>
        <el-menu-item-group>
          <sub-menu :sideMenu="item.children"></sub-menu>
        </el-menu-item-group>
      </el-submenu>
      <!-- обычное меню -->
      <el-menu-item @click="jumpRoute(item.name)">
        <i class="el-icon-menu"></i>
        <span slot="title">{{item.meta.name}}</span>
      </el-menu-item>
    </div>
  </div>
</template>
<script>
  export default {
    name: "sub-menu",//даём имя компоненту, после чего можно использовать рекурсию
    props: {
      sideMenu: {
        type: Array,
        default: ()=>[] //определяем данные по умолчанию
      }
    },
    data() {
      return {
        isCollapse: false
      }
    },
    methods: {
      jumpRoute(name) {
        this.$router.push({ name })
      }
    },
    mounted() {
      console.log(this.sideMenu)
    }
  }
</script>
<style>
</style>

body, ul, p, li, h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
}

.el-menu--collapse .el-submenu__title span {
    height: 0;
    width: 0;
    overflow: hidden;
    visibility: hidden;
    display: inline-block;
}

.el-menu--collapse .el-menu-item .el-submenu__icon-arrow, .el-menu--collapse .el-submenu .el-submenu__title .el-submenu__icon-arrow {
    display: none;
}
.el-menu-item-group .el-menu-item{
   padding:0 0 0 30px;

}

.el-menu-item-group .el-menu-item-group__title{
    padding:0
}

  methods: {
      quit() {
        //1. перейти на страницу входа
        //2. очистить токен
        //3. очистить хранилище sideMenu
        //4. обновить страницу
         localStorage.removeItem("qftoken")
        this.$router.push("/login")
        this.$store.commit("CLEAR_MENU")
        window.location.reload()
      }