Vue?el-menu?左側菜單導航功能的實現(xiàn)

更新時間：2022年08月23日 15:18:33 作者：編程界明世隱

這篇文章主要介紹了Vue?el-menu?左側菜單導航功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

引言

Vue是現(xiàn)在前端最流行的框架之一，作為前端開發(fā)人員應該要熟練的掌握它，如果你是打算學習Vue的開發(fā)流程，那么來吧，明哥帶你快速上手、帶你飛！
即使你并非前端開發(fā)人員，對前端的開發(fā)流程進行一定的了解也是很有必要的，誰也不確定公司以后會不會讓我做前端去，做些簡單的實例既不需要花費很多時間，也可以提高自己的自信和成就感，所以跟著明哥走，沒有錯，來吧！

一級菜單

實現(xiàn)最簡單的一級菜單

在之前的Aside.vue中去實現(xiàn)代碼，一級菜單其實非常的簡單，直接用el-menu 和el-menu-item 就行，Aside.vue代碼如下：

<template>
    <div>
        <el-menu>
            <el-menu-item>一級菜單1</el-menu-item>
            <el-menu-item>一級菜單2</el-menu-item>
            <el-menu-item>一級菜單3</el-menu-item>
        </el-menu>
    </div>
</template>

<script>
    export default {
        name: "Aside"
    }
</script>

<style scoped>
</style>

效果圖如下：

設置菜單背景顏色和文字顏色

在el-menu中設置 background-color 和 text-color 屬性

<template>
    <div>
        <el-menu background-color="#545c64" text-color="#ffffff">
            <el-menu-item>一級菜單1</el-menu-item>
            <el-menu-item>一級菜單2</el-menu-item>
            <el-menu-item>一級菜單3</el-menu-item>
        </el-menu>
    </div>
</template>

設置選中后菜單文字顏色

設置 active-text-color 屬性，但是必須在需要生效的子菜單中設置index屬性，否則不生效，先不設置index

<template>
    <div>
        <el-menu background-color="#545c64" text-color="#ffffff"
                 active-text-color="#ffd04b">
            <el-menu-item>一級菜單1</el-menu-item>
            <el-menu-item>一級菜單2</el-menu-item>
            <el-menu-item>一級菜單3</el-menu-item>
        </el-menu>
    </div>
</template>

可以看到我點擊以后，菜單文字的顏色沒有變化，現(xiàn)在來加入index屬性

<template>
    <div>
        <el-menu background-color="#545c64" text-color="#ffffff"
                 active-text-color="#ffd04b">
            <el-menu-item index="1">一級菜單1</el-menu-item>
            <el-menu-item index="2">一級菜單2</el-menu-item>
            <el-menu-item index="3">一級菜單3</el-menu-item>
        </el-menu>
    </div>
</template>

上圖我們可以看到開始是沒有選中菜單的，是可以設置默認的選中菜單的，設置default-active為對應的index值即可，比如我設置默認選中第2個菜單，第2個菜單的index為2，所以我們在el-menu中加入 default-active=“2”

<template>
    <div>
        <el-menu background-color="#545c64" text-color="#ffffff"
                 active-text-color="#ffd04b" default-active="2">
            <el-menu-item index="1">一級菜單1</el-menu-item>
            <el-menu-item index="2">一級菜單2</el-menu-item>
            <el-menu-item index="3">一級菜單3</el-menu-item>
        </el-menu>
    </div>
</template>

刷新頁面后，默認選中了第2個菜單

在菜單中加入圖標

在菜單中加入圖標會使得我們的菜單看起來比較漂亮、舒服，這樣涉及到圖標的使用，可以參考我前面的文章：Vue開發(fā)實例（08）之Icon圖標的使用
用 i 標簽即可，在菜單名前面加入 <i class=“el-icon-XXX”>，XXX是圖標的名稱。

<template>
    <div>
        <el-menu background-color="#545c64" text-color="#ffffff"
                 active-text-color="#ffd04b" default-active="2">
            <el-menu-item index="1"><i class="el-icon-location"></i>一級菜單1</el-menu-item>
            <el-menu-item index="2"><i class="el-icon-document"></i>一級菜單2</el-menu-item>
            <el-menu-item index="3"><i class="el-icon-setting"></i>一級菜單3</el-menu-item>
        </el-menu>
    </div>
</template>

二級菜單

實現(xiàn)二級菜單

修改一級菜單1為2級菜單

<template>
    <div>
        <el-menu background-color="#545c64" text-color="#ffffff"
                 active-text-color="#ffd04b" default-active="2" >
            <el-submenu index="1">
                <template slot="title"><i class="el-icon-location"></i><span>一級菜單1</span></template>
                <el-menu-item index="1-1">選項1</el-menu-item>
                <el-menu-item index="1-2">選項2</el-menu-item>
            </el-submenu>
            <el-menu-item index="2"><i class="el-icon-document"></i>一級菜單2</el-menu-item>
            <el-menu-item index="3"><i class="el-icon-setting"></i>一級菜單3</el-menu-item>
        </el-menu>
    </div>
</template>

修改分析【其實很簡單】：

將el-menu 修改為 el-submenu
按鈕名稱、圖標用 template標簽包裹，必須加入 slot="title"屬性，否則菜單樣式不對。
加入新的兩個 el-menu-item。

三級菜單

實現(xiàn)三級菜單

跟二級菜單的修改方式是一樣的，就是多加一層

<template>
    <div>
        <el-menu background-color="#545c64" text-color="#ffffff"
                 active-text-color="#ffd04b" default-active="2">
            <el-submenu index="1">
                <template slot="title"><i class="el-icon-location"></i><span>一級菜單1</span></template>
                <el-submenu index="1-1">
                    <template slot="title"><i class="el-icon-location"></i><span>選項1</span></template>
                    <el-menu-item index="1-1-1">選項1-1</el-menu-item>
                    <el-menu-item index="1-1-2">選項1-2</el-menu-item>
                </el-submenu>
                <el-submenu index="1-2">
                    <template slot="title"><i class="el-icon-location"></i><span>選項2</span></template>
                    <el-menu-item index="1-2-1">選項2-1</el-menu-item>
                    <el-menu-item index="1-2-2">選項2-2</el-menu-item>
                </el-submenu>
            </el-submenu>
            <el-menu-item index="2"><i class="el-icon-document"></i>一級菜單2</el-menu-item>
            <el-menu-item index="3"><i class="el-icon-setting"></i>一級菜單3</el-menu-item>
        </el-menu>
    </div>
</template>

<script>
    export default {
        name: "Aside"
    }
</script>

<style scoped>
</style>

加入相關事件

打開open、關閉close、選擇select 3個事件
在el-menu中加入三個事件屬性，并編寫對應的method

<template>
    <div>
        <el-menu background-color="#545c64" text-color="#ffffff"
                 active-text-color="#ffd04b" default-active="2"
                 @open="handleOpen"
                 @close="handleClose"
                 @select="handSelect">
            <el-submenu index="1">
                <template slot="title"><i class="el-icon-location"></i><span>一級菜單1</span></template>
                <el-submenu index="1-1">
                    <template slot="title"><i class="el-icon-location"></i><span>選項1</span></template>
                    <el-menu-item index="1-1-1">選項1-1</el-menu-item>
                    <el-menu-item index="1-1-2">選項1-2</el-menu-item>
                </el-submenu>
                <el-submenu index="1-2">
                    <template slot="title"><i class="el-icon-location"></i><span>選項2</span></template>
                    <el-menu-item index="1-2-1">選項2-1</el-menu-item>
                    <el-menu-item index="1-2-2">選項2-2</el-menu-item>
                </el-submenu>
            </el-submenu>
            <el-menu-item index="2"><i class="el-icon-document"></i>一級菜單2</el-menu-item>
            <el-menu-item index="3"><i class="el-icon-setting"></i>一級菜單3</el-menu-item>
        </el-menu>
    </div>
</template>

<script>
    export default {
        name: "Aside",
        methods: {
            handleOpen(key, keyPath) {
                console.log("打開：",key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log("關閉：",key, keyPath);
            },
            handSelect(key, keyPath) {
                console.log("選擇：",key, keyPath);
            }
        }
    }
</script>

<style scoped>
</style>

實現(xiàn)點擊菜單跳轉

當點擊菜單項，能夠在右邊的Main窗口中顯示對應的頁面。

創(chuàng)建3個頁面 Main1.vue Main2.vue Main2.vue

<template>
    <div>
       這是Main1
    </div>
</template>

<script>
    export default {
        name: "Main1"
    }
</script>

<style scoped>
</style>

<template>
    <div>
       這是Main2
    </div>
</template>

<script>
    export default {
        name: "Main2"
    }
</script>

<style scoped>
</style>

<template>
    <div>
       這是Main3
    </div>
</template>

<script>
    export default {
        name: "Main3"
    }
</script>

<style scoped>
</style>

2.配置路由

在src下創(chuàng)建 router.js
創(chuàng)建了主路由index，就是進入的主頁面
這3個index子路由，用來跳轉，分別對應 main1 main2 main3 幾個頁面。
子路由的跳轉位置為，index的Main位置，因為我們管理系統(tǒng)只需要Main位置發(fā)生改變，頭部、左邊導航、下方footer是不需要改變的。

router.js如下：

import VueRouter from "vue-router"
import Index from "./components/Index";
const routes = [
    //一級路由
    {
        path: '/index',
        name: 'index',
        component: Index,
        //路由嵌套
        children:[
            {path: '/index/menu1',component: () => import('./components/Main1.vue')},
            {path: '/index/menu2',component: () => import('./components/Main2.vue')},
            {path: '/index/menu3',component: () => import('./components/Main3.vue')}
        ]
    }
]

const router = new VueRouter({
    mode:'history',
    routes
})

export  default router;

3.在main.js中配置這個路由，讓路由生效

在原來的Index.vue頁面，設置路由跳轉位置，這里我們在原來的Main位置修改位 router-view即可。

菜單中加入路由配置

這里我們使用一級菜單，簡單方便，修改Aside.vue的代碼。
在el-menu里面加入 router屬性
在el-menu-item 的index，設置對應的子路由

<template>
    <div style="height: 100%;">
        <el-menu background-color="#545c64" text-color="#ffffff"
                 active-text-color="#ffd04b" class="el-menu-vertical-demo"
                    router>
            <el-menu-item index="/index/menu1"><i class="el-icon-location"></i>一級菜單1</el-menu-item>
            <el-menu-item index="/index/menu2"><i class="el-icon-document"></i>一級菜單2</el-menu-item>
            <el-menu-item index="/index/menu3"><i class="el-icon-setting"></i>一級菜單3</el-menu-item>
        </el-menu>
    </div>
</template>

<script>
    export default {
        name: "Aside"
    }
</script>

<style scoped>
    .el-menu-vertical-demo{
        height: 100%;
    }
</style>

我們進入index主路由

點擊左側導航菜單

處理默認的Main窗口為空的情況

剛進入index路由的時候，我們看到main窗口里面是沒有東西的

這樣顯然不好看，于是我們可以設置默認的跳轉位置，設置如下：

在子路由中添加一個新的路由，用來默認跳轉
在主路由中配置redirect 值為這個子路由

上方其實就是一個重定向的操作，當直接輸入index路由時就會默認跳轉到Main路由里面，這樣就會有個默認的頁面了。

下方我們在地址欄只輸入到index，敲回車后，會在后面默認加上 “/Main”，直接重定向了，同時Main窗口的頁面也顯示了我們指定的頁面。

小結

這節(jié)總結了“el-menu實現(xiàn)左側菜單導航”，希望能對大家有所幫助

到此這篇關于Vue el-menu 左側菜單導航的文章就介紹到這了,更多相關Vue el-menu菜單導航內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

淺談vuex中store的命名空間
今天小編就為大家分享一篇淺談vuex中store的命名空間，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
詳解vue-router數(shù)據(jù)加載與緩存使用總結
這篇文章主要介紹了詳解vue-router數(shù)據(jù)加載與緩存使用總結，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-10-10
nginx部署訪問vue-cli搭建的項目的方法
本篇文章主要介紹了nginx部署訪問vue-cli搭建的項目的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-02-02
vite2打包的時候vendor-xxx.js文件過大的解決方法
vite2是一個非常好用的工具，只是隨著代碼的增多，打包的時候?vendor-xxxxxx.js?文件也越來越大，本文主要介紹了vite2打包的時候vendor-xxx.js文件過大的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
vue項目中應用ueditor自定義上傳按鈕功能
這篇文章主要介紹了vue項目中應用ueditor自定義上傳按鈕功能，文中以vue-cli生成的項目為例給大家介紹了vue項目中使用ueditor的方法，感興趣的朋友跟隨腳本之家小編一起學習吧
2018-04-04
vue中利用iscroll.js解決pc端滾動問題
這篇文章主要介紹了vue中利用iscroll.js解決pc端滾動問題，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2020-02-02
vue-cli 3.x配置跨域代理的實現(xiàn)方法
這篇文章主要介紹了vue-cli 3.x配置跨域代理的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-04-04
vue項目實戰(zhàn)總結篇
離放假還有1天，今天小編抽空給大家分享前端時間小編做的vue項目，非常完整，需要的朋友參考下
2018-02-02
vue裁切預覽組件功能的實現(xiàn)步驟
這篇文章主要介紹了vue裁切預覽組件功能的實現(xiàn)代碼，本文通過實例代碼相結合的形式給大家介紹的非常詳細，具有一定的參考借鑒價值,感興趣的朋友跟隨腳本之家小編一起學習吧
2018-05-05
vue中的event bus非父子組件通信解析
本篇文章主要介紹了 vue中的event bus非父子組件通信解析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-10-10