vue侧边栏，通过elemet-ui menu 和子路由实现

本文链接：https://blog.csdn.net/YC2chen/article/details/124132518

vue侧边栏，通过elemet-ui menu 和子路由实现

1.配置子路由，在你的侧边栏页面路由处

onst routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/index',
    //右侧默认页面 路由
    redirect:'/xxxx/woo',
    name: 'index',
    component: Index,
    //需要路由的页面 侧边栏
    children:[
      {
        path:'/xxxx/woo',
        name:'xxxxx',
        component:xxxxx
      },
      {
        path:'/xxxxx',
        name:'xxx',
        component:xxx
      }
    ]
  },

2.利用element-ui 的menu组件开启路由模式

        <div class="side-menu">
       <!-- 核心代码 可以直接复制去用 -->
          <el-menu
              router
              class="el-menu-vertical-demo"
              @open="handleOpen"
              active-text-color="#ffffff"
          >
            <template v-for="route in $router.options.routes" 
            v-if="route.children && route.children.length">
              <template v-for="item in route.children">
                <el-menu-item
                    class="menu-item-name"
                    :key="route.path + '/' + item.path"
                    :index="item.path"
                    style="text-align: center"
                >
                  {{ item.name }}
                </el-menu-item>
              </template>
            </template>
          </el-menu>
          <!-- 核心代码 -->
        </div>