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);
},
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 零经验选手,Compose 一天开发一款小游戏!
· 通过 API 将Deepseek响应流式内容输出到前端
· AI Agent开发,如何调用三方的API Function,是通过提示词来发起调用的吗