element-ui 的路由跳转设置

Element-Ui侧边栏实现路由跳转，代码如下

//要实现侧边栏路由跳转，

在中需要–:default-active=“this.$route.path”。用来绑定路由表

在中需要–router------或者router=true

在中的index不可缺少，为必须值，不过此处的index仅为索引，用来让当前元素下的子菜单收缩或释放。每一个submenu的index值只要不一样便可

在中，index的值不可缺少，就是用这个来进行路由跳转，index的值为跳转的路径

<el-menu 
    :default-openeds="['1', '3']"
    :default-active="this.$route.path"
    router
    >
      <div class="icon">
          <i class="el-icon-img">
              <img src="@/assets/images/图标.png"/>
          </i>
      </div>
      <el-submenu index="1">
        <template slot="title"><i class="el-icon-message"></i>基础管理</template>
          <el-menu-item index="/goods">商品管理</el-menu-item>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title"><i class="el-icon-menu"></i>订单管理</template>
          <el-menu-item index="/order">交易订单</el-menu-item>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title"><i class="el-icon-setting"></i>系统管理</template>
        <el-menu-item-group>
          <el-menu-item index="3-1">用户管理</el-menu-item>
          <el-menu-item index="3-2">菜单管理</el-menu-item>
          <el-menu-item index="3-3">角色管理</el-menu-item>
          <el-menu-item index="3-4">公司管理</el-menu-item>
          <el-menu-item index="3-5">权限管理</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="4">
        <template slot="title"><i class="el-icon-menu"></i>支付管理</template>
          <el-menu-item index="4-1">支付配置信息</el-menu-item>
          <el-menu-item index="4-2">支付配置</el-menu-item>
      </el-submenu>
    </el-menu>

具体的路由配置

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  mode:'history',
  routes: [
     {
     	path:"/goods",
     	name:"goods",     	
     	component:()=> import("@/views/Goods/goods")
     },
     {
     	path:"/order",
     	name:"order",
     	component:()=> import("@/views/Order/order")
     }
   
  ]
})