【Vue项目篇】Vue多级菜单的路由配置问题

router.js

/*layout */
import layout from "../views/Layout"
{
   
    path: '/FrontEnd',
    name: 'FrontEnd',
    redirect: '/FrontEnd/CSS',
    component: layout,  //导航栏以及面包屑等
    title: '常用组件',
    meta: {
   
      role: ['admin']
    },
    children: [
      {
   
        path: '/FrontEnd/CSS',
        component: () => import('../views/FrontEnd/CSS'),
        meta: {
   
          title: 'CSS',
          role: ['admin','editor']
        },
        children: []
      },
      {
   
        path: '/FrontEnd/Vuex',
        component: () => import('../views/FrontEnd/Vuex'),
        meta: {
   
          title: 'Vuex',
          role: ['admin','editor']
        },
        children: []
      },
      {
   
        path: '/FrontEnd/VueComponent',
        component: () => import('../views/FrontEnd/VueComponent'),
        meta: {
   
          title: '常用组件',
          role: ['admin','editor']
        },
        children: []
      },
      {
   
        path: '/Excel',
        component: () => import('../views/Excel/index'),
        meta: {
   
          title: '表格',
          role: ['admin','editor']
        },
        children: [
          {
   
            path: '/Excel/ExportExcel',
            component: () => import('../views/Excel/export-excel'),
            meta: {
   
              title: '表格导出',
              role: ['admin','editor']
            },
            children: []
          },
          {
   
            path: '/Excel/MergerHeader',
            component: () => import('../views/Excel/merger-header'),
            meta: {
   
              title: '多级表头',
              role: ['admin','editor']
            },
            children: []
          }
        ]
      },
    ]
  }

views/Excel/index.vue

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
   
  
}
</script>

项目有三级菜单开发情况时，如下图，需要在对路由配置时，新建一个二级菜单页面并添加一个< router-view>< /router-view>标签用来承载三级页面（感觉这个方法不是最优解，但是目前只找到这个方法，等之后自己技术提升或者找到更好的解决方法再来补充吧 ^ - ^）