实现菜单栏路由的跳转

菜单栏 的代码块

 <div class="sidebar" :collapse="collapse">
      <el-menu class="sidebar-el-menu" :collapse="collapse" :default-active="onRoutes"  router>
      //此处router如果不加无法实现跳转
        <template v-for="item in items">//使用for循环遍历菜单
          <template v-if="item.subs">//判断是否有二级
            <el-submenu :index="item.index" :key="item.index">
              <template slot="title">
                <i :class="item.icon"></i>
                <span slot="title">{{ item.title }}</span>
              </template>
              <template v-for="subItem in item.subs">
                <el-submenu
                  v-if="subItem.subs"
                  :index="subItem.index"
                  :key="subItem.index"
                >
                  <template slot="title">{{ subItem.title }} </template>
                  <el-menu-item
                    v-for="(threeItem, i) in subItem.subs"
                    :key="i"
                    :index="threeItem.index"
                  >
                    {{ threeItem.title }}
                  </el-menu-item>
                </el-submenu>
                <el-menu-item
                  v-else
                  :index="subItem.index"
                  :key="subItem.index"
                >
                  {{ subItem.title }}
                </el-menu-item>
              </template>
            </el-submenu>
          </template>
          <template v-else>
            <el-menu-item :index="item.index" :key="item.index">
              <i :class="item.icon"></i
              ><span slot="title">{{ item.title }}</span>
            </el-menu-item>
          </template>
        </template>
      </el-menu>
    </div>

script中的代码
items: [
{
icon: “el-icon-s-home”,
index: “/user/list”,
title: “首页”,
},
{
icon: “el-icon-s-promotion”,
index: “1”,
title: “人脸上传”,//有二级菜单
subs:[{
index: “/user/profile”,
title: “拍照上传”,
},{
index: “/user/authentication”,
title: “身份证识别”,
},
]
}
computed: {
onRoutes() {
return this.$route.path.replace("/", “”);
},
},