vue实现侧边栏跳转

vue中使用element-ui实现导航栏跳转：

提示：default-active和index的使用较为重要

1、index.vue

<template>
   <el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" @select="handleSelect" :collapse="isCollapse" :router="true">
                    <el-submenu :index="item.id" v-for="(item, i) in menuList" :key="i" >
                        <template slot="title">
                            <span slot="title">{{item.name}}</span>
                        </template>
                        <el-menu-item-group v-for="(val, index) in item.childList" :key="index">
                            <el-menu-item :index="val.path">{{val.name}}</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
   </el-menu>
</template>

<script>
	menuList: [{
                    name: '获取建议书',
                    id: '1',
                    childList: [
                        {
                            name: '创建建议书',
                            id: '1-1',
                            path: '/shareFire/CreateProposal'
                        },
                        {
                            name: '创建报价',
                            id: '1-2',
                        }
                    ]
                }, {
                    name: '及时投保',
                    id: '2',
                    childList: [
                        {
                            name: '及时投保',
                            id: '2-1',
                        }]
                }]
</script>

2、router.js

  {
    path: '/index/',
    name: 'index',
    component:  () => import('../views/home/index'),
    children: [
        {
          path: 'CreateProposal',
          name: 'CreateProposal',
          component: () => import('../views/ObtainProposals/CreateProposal'),
        }]
  },

---