码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-05-15 16:10:12      阅读:165      评论:0      收藏:0      [点我收藏+]

标签:item   ica   sse   优惠   submenu   leo   vertica   导航栏   template   

<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);
            },

 

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

标签:item   ica   sse   优惠   submenu   leo   vertica   导航栏   template   

原文地址:https://www.cnblogs.com/meiyanstar/p/12895049.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!