關於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')
      },
    ]
  },