vue+element ui实现左侧导航栏动态路由跳转

复制代码
<el-col>
                <el-menu
                default-active="1"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="rgb(255,255,255,0)"
                text-color="#fff"
                active-text-color="#FFFC00">
                    <el-submenu index="1">
                        <template slot="title"><span>权限管理</span></template>
                        <el-menu-item index="1-2" @click="goTo('/home/welcome')">
                            <img src="../assets/images/roled.png" alt="" style="width:21px;height:19px">
                            <span slot="title">权限管理</span>
                        </el-menu-item>
                        <el-menu-item index="1-1">
                            <img src="../assets/images/roled.png" alt="" style="width:21px;height:19px">
                            用户管理
                        </el-menu-item>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title"><span>权限管理</span></template>
                        <el-menu-item index="2-2">
                            <img src="../assets/images/roled.png" alt="" style="width:21px;height:19px">
                            权限管理
                        </el-menu-item>
                        <el-menu-item index="2-1">
                            <img src="../assets/images/roled.png" alt="" style="width:21px;height:19px">
                            用户管理
                        </el-menu-item>
                    </el-submenu>
                    <el-menu-item index="2">
                        <span slot="title">商品管理</span>
                    </el-menu-item>
                    <el-menu-item index="3">
                        <template slot="title"><span>分类管理</span></template>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <template slot="title"><span>优惠券管理</span></template>
                    </el-menu-item>
                    <el-menu-item index="5">
                        <template slot="title"><span>优惠券管理</span></template>
                    </el-menu-item>
                    <el-menu-item index="6">
                        <template slot="title"><span>积分管理</span></template>
                    </el-menu-item>
                    <el-menu-item index="7">
                        <template slot="title"><span>订单管理</span></template>
                    </el-menu-item>
                    <el-menu-item index="8">
                        <template slot="title"><span>数据管理</span></template>
                    </el-menu-item>
                    <el-menu-item index="9">
                        <template slot="title"><span>操作记录</span></template>
                    </el-menu-item>
                    <el-menu-item index="10">
                        <template slot="title"><span>操作记录</span></template>
                    </el-menu-item>
                </el-menu>
            </el-col>
复制代码

跳转的方法:

// 路由跳转
            goTo(path) {
                this.$router.replace(path);
            },

 

posted @   小那  阅读(5485)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 零经验选手,Compose 一天开发一款小游戏!
· 通过 API 将Deepseek响应流式内容输出到前端
· AI Agent开发,如何调用三方的API Function,是通过提示词来发起调用的吗
点击右上角即可分享
微信分享提示