vue-router 與 elementUI導航欄 配合實現路由設置小技巧

版權聲明：本文爲博主原創文章，未經博主允許不得轉載。 https://blog.csdn.net/github_39532240/article/details/76020759

  {
    path:'/home',
    component:Home,
    name:'導航一',
    iconCls: 'el-icon-menu',
    children: [
      { path: '/table', component: table, name: '表格'},
      { path: '/carousel', component: elCarousel, name: '走馬燈' },
      { path: '/datepicker', component:elDatePicker, name: '時間選擇' },
      { path: '/other', component:other , name: '其他' },
    ]
  },
 
   路由配置如上時，子路由匹配到“/table”時組件能加載出來，而不是匹配“/home/table”;
   
  這是因爲vue-router中嵌套路徑以“/”開頭時將被當做根路徑；（https://router.vuejs.org/zh-cn/essentials/nested-routes.html）

  {
    path:'/home',
    component:Home,
    name:'導航一',
    iconCls: 'el-icon-menu',
    children: [
      { path: 'table', component: table, name: '表格'},
    ]
  },
    配置如上時，則子路由匹配“/home/table”時加載組件；

   在配合elementUI組件導航欄進行路由跳轉時，注意路由參數設置：el-menu-item 的 index參數決定點擊時跳轉的路徑！
   以下設置，點擊導航欄纔會跳轉到“/home/table”。

     <el-menu :default-active="$route.path"  router unique-opened >
        <template v-for="(item,index) in $router.options.routes">
          <el-submenu  :index="index+''" v-show="item.name">
            <template slot="title">
              <i :class="item.iconCls"></i>{{item.name}}
            </template>
            <el-menu-item v-for="child in item.children"  :index="'/home/'+child.path"  :key="child.path" >
                 {{child.name}}
            </el-menu-item>
          </el-submenu>
        </template>

      </el-menu>

   綜上所述，，設置路由嵌套時，路由設置和跳轉參數設置兩者必須統一，才能保證組件正確加載！