zoukankan      html  css  js  c++  java
  • 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="21px;height:19px">
                                <span slot="title">权限管理</span>
                            </el-menu-item>
                            <el-menu-item index="1-1">
                                <img src="../assets/images/roled.png" alt="" style="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="21px;height:19px">
                                权限管理
                            </el-menu-item>
                            <el-menu-item index="2-1">
                                <img src="../assets/images/roled.png" alt="" style="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);
                },
  • 相关阅读:
    实习第十天
    实习第九天
    实习第八天
    武汉第七天
    武汉第六天
    实习第五天
    实习第四天
    NSArray
    NSString
    NSObject
  • 原文地址:https://www.cnblogs.com/meiyanstar/p/12895049.html
Copyright © 2011-2022 走看看