python web全栈,  python全栈,  前端开发

11主页-实现侧边栏路由连接的改造

通过menu 菜单属性 router (是否使用 vue-router 的模式,启用该模式会在激活导航时以 index 作为 path 进行路由跳转)

https://element.eleme.cn/#/zh-CN/component/menu

获取菜单列表接口中的path

file

关键代码块

  • Home.vue
<el-menu
                        default-active="2"
                        class="el-menu-vertical-demo"
                        @open="handleOpen"
                        @close="handleClose"
                        background-color="#262626"
                        text-color="#fff"
                        active-text-color="#2c8aee"
                        unique-opened
                        :collapse="isCollapse"
                        :collapse-transition="false"
                        router>  <!--开启路由模式,点击二级菜单才会跳转-->
<!-- 二级菜单 -->
                        <el-menu-item :index="'/' + subItem.path" v-for="subItem in item.children" :key="subItem.id">
                            <template slot="title">
                                <!-- 图标 ,将二级图标设置成menu-->
                                <i class="el-icon-menu"></i>
                                <!-- 文本 -->
                                <span>{{subItem.authName}}</span>
                            </template>
                        </el-menu-item>

file

file

留言

您的电子邮箱地址不会被公开。 必填项已用*标注

闽ICP备20008591号-1