关于vue-template-admin中自定义路由组件缺失路由导航栏问题

正常的显示如图所示:

自定义路由组件时出现了各种异常情况, 其中主要包括左边路由导航栏组件缺失的问题:

问题原因发现及解决办法:　　

　　右边路由导航栏组件是模板中自定义的组件Layout, 我们自定义路由组件时一定要把这个组件当做父组件, 否则就会出现路由组件的缺失, 我们也就只能看到自定义的页面内容

　　引出的新问题:

　　　　如果我们把Layout组件当做我们自定义的路由中的显示组件, 那么我们自定义的组件该怎么显示呢?

　　　　　　解决办法:　　vue-template-admin模板(或者说Vue)支持两个特性:

　　　　　　　　　　　　　　一个是组件中嵌套组件(子组件)并不会替换掉原组件位置, 只不过会在父组件中的一个位置显示子组件

　　　　　　　　　　　　　　二是如果子路由中只有一个子路由, 那么默认没有下拉框显示子路由,直接吧子路由相关信息显示, 上图红圈内容即是展示结果

自定义路由的代码格式如下;

 1 {
 2     name: '组件使用',
 3     path: '/test',
 4     redirect: '/test/test01',
 5     meta: { title: '测试', icon: 'dashboard' },
 6     component: Layout,
 7     children: [
 8       {
 9         name: '测试组件',
10         path: 'test01',
11         meta: {title: '组件测试', icon: 'dashboard'},
12         component: () => import('@/views/null/Test')
13       },
14     ]
15   },