Vue多级路由展示

注意事项：路由出口

 <router-view :key="key" />

注意事项：路径层级

// --------- 文件层级展示 ----------//
// 文件： src
//   文件： layouts
//     文件：AppMain > index.vue   // 二级展示出口
//   文件： views
//     文件：personnel > index.vue // 三级展示出口
//       文件：health > index.vue  // 展示内容
// 文本：App.vue                   // 总出口

// ---------- 路由报文展示 ----------//
// 二级展示
data: [
   "path": '/',
   "component": 'layouts',
   "redirect": 'noRedirect',
   "meta": { "title": '系统层级' },
   "children": [
      {
       "path": '/',
       "component": 'layouts',
       "meta": { "title": '第一层' },
       "children": [
        {
          "path": 'health',
          "component": 'views/personnel/health/index',
          "meta": { "title": '第二层' }, 
          "name": 'health',
          "sort": '1',
        }
        ],
        "name": 'layouts',
        "sort": '1',
      }
    ],
 ]
// 三级展示
data: [
   "path": '/',
   "component": 'layouts',
   "redirect": 'noRedirect',
   "meta": { "title": '系统层级' },
   "children": [
      {
       "path": '/',
       "component": 'layouts',
       "meta": { "title": '第一层' },
       "children": [
        {
          "path": 'personnel',
          "component": 'views/personnel/index',
          "meta": { "title": '第二层' }, 
          "children": [
            {
              "path": 'health',
              "component": 'views/personnel/health/index',
              "meta": { "title": '第三层' }, 
              "name": 'health',
              "sort": '1',
            }
           ],
           "name": 'personnel',
           "sort": '1',
          }
        ],
        "name": 'layouts',
        "sort": '1',
      }
    ],
 ]

// ---------- 文件内容展示 ----------//
// APP.vue   // 总出口
  <template>
    <div id="App>
      <router-view />
    </div>
  </template>
  <script>
    export default {
     name: 'App',
     data() {
       return {}
      }
    }
  </script>

// src > layouts > AppMain > index.vue   //  二级出口
  <template>
    <div class="AppMain">
     <transition mode="out-in">  
       <keep-alive :include="includeRoutes" :max="20">
         <router-view :key="key" />
       </keep-alive>    
     </transition>
    </div>
  </template>
  <script>
    import { mapActions, mapGetters } from 'vueX'
    export default {
     name: 'AppMain',
     data() {
       return {}
      },
     computed: {
      ...mapGetters({
          visitedRoutes: 'tabsBar/visitedRoutes',   // store > modules > tabsBar
       }),
       includeRoutes() {
        let newArr = []
        newArr = this.visitedRoutes.map(item => !item.meta.noKeepAlive && item.name)
        return newArr
       },
       key() {
         return this.$route.path
       }
     },
     watch: {
     },
     created() {
     },
     mounted() {
     },
     methods: {
      ...mapActions({
        foldSideBar: 'settings/foldSideBar',    // store > modules > settings
       })
     }
    }
  </script>

// src > views > personnel > index.vue  // 三级出口
   <template>
    <div class="personnel">
     <transition mode="out-in">  
       <keep-alive>
         <router-view :key="key" />
       </keep-alive>    
     </transition>
    </div>
  </template>
  <script>
    export default {
     name: 'personnel',
     data() {
       return {}
      },
     computed: {
      key() {
        return this.$route.path
      }
    }
  </script>

// src > views > personnel > health > index.vue   // 内容展示
   <template>
    <div class="health">
      <p>{{ content }}</p>
    </div>
  </template>
  <script>
    export default {
     name: 'health',
     data() {
       return {
         content: '展示的内容'，
       }
      },
    }
  </script>