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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM