注意事项：路由出口

 <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>