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);
                },
  • 相关阅读:
    鲁迅说过搜索引擎
    下载github上文件与release的安装包-解决s3.amazonaws.com问题
    作业九----DFA最小化
    作业八----非确定的自动机NFA确定化为DFA
    作业七----正规式到正规文法与自动机
    作业六----正规文法与正规式
    第五次作业----词法分析程序的设计与实现
    第四次作业
    作业三
    2.文法和语言
  • 原文地址:https://www.cnblogs.com/meiyanstar/p/12895049.html
Copyright © 2011-2022 走看看