vue-router 与 elementUI导航栏 配合实现路由设置小技巧

  {

    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>

   综上所述，，设置路由嵌套时，路由设置和跳转参数设置两者必须统一，才能保证组件正确加载！