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

 

正常的显示如图所示:

 

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

 

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

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

　　

　　引出的新问题:

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

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

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

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

　　　　　　　　　　　　　　

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

{
    name: '组件使用',
    path: '/test',
    redirect: '/test/test01',
    meta: { title: '测试', icon: 'dashboard' },
    component: Layout,
    children: [
      {
        name: '测试组件',
        path: 'test01',
        meta: {title: '组件测试', icon: 'dashboard'},
        component: () => import('@/views/null/Test')
      },
    ]
  },