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

Posted 2020-12-20 meiyanstar

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