vue3 element-plus Menu 菜单使用方法

第一步在app.vue里配置顶栏

1.  
   <template>
2.  
   <div id="nav">
3.  
    
4.  
   <div class="h-6" />
5.  
   <el-menu
6.  
   default-active="/keng"
7.  
   class="el-menu-demo"
8.  
   mode="horizontal"
9.  
   background-color="#545c64"
10.  
    text-color="#fff"
11.  
    active-text-color="#ffd04b"
12.  
    router //开启路由跳转
13.  
    >
14.  
    <el-menu-item index="/dyg1">用户</el-menu-item>
15.  
    <el-menu-item index="/deg1">教学</el-menu-item>
16.  
    <el-menu-item index="/dsg1">题库</el-menu-item>
17.  
    </el-menu>
18.  
    <router-view/>
19.  
    </div>
20.  
     
21.  
    </template>

第2步设置侧栏可以设置多个侧栏

1.  
   <template>
2.  
   <div class=''>
3.  
   <el-col :span="4">
4.  
   <el-menu default-active="/yongh" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff"
5.  
   active-text-color="#ffd04b" router>//router开启路由
6.  
   <el-menu-item index="/dyg2">
7.  
   <span>学员管理</span>
8.  
   </el-menu-item>
9.  
   <el-menu-item index="/dyg3">
10.  
    <span>助教管理</span>
11.  
    </el-menu-item>
12.  
    </el-menu>
13.  
    </el-col>
14.  
    <el-col :span="20">
15.  
    <router-view></router-view>//设置第二个坑
16.  
    </el-col>
17.  
    </div>
18.  
    </template>

第3步在router  index.js里设置路由

1.  
   const routes = [
2.  
   {
3.  
   path: '/',
4.  
   redirect:'/dyg1',//设置路由重定向第一次进入的页面
5.  
   },
6.  
   {
7.  
   path: '/dyg1',
8.  
   name: 'dyg1',
9.  
   component: () => import('../views/dyg/dyg1.vue'),
10.  
    children:[{ //设置子路由
11.  
    path:'/dyg2',
12.  
    name:'dyg2',
13.  
    component:()=>import('../views/dyg/dyg2.vue'),
14.  
    },{
15.  
    path:'/dyg3',
16.  
    name:'dyg3',
17.  
    component:()=>import('../views/dyg/dyg3.vue'),
18.  
    }]
19.  
    },
20.  
    ]

然后就可以使用拉

这篇好文章是转载于：学新通技术网