Vue?el-menu?左側(cè)菜單導(dǎo)航功能的實(shí)現(xiàn)
引言
Vue是現(xiàn)在前端最流行的框架之一,作為前端開發(fā)人員應(yīng)該要熟練的掌握它,如果你是打算學(xué)習(xí)Vue的開發(fā)流程,那么來吧,明哥帶你快速上手、帶你飛!
即使你并非前端開發(fā)人員,對(duì)前端的開發(fā)流程進(jìn)行一定的了解也是很有必要的,誰也不確定公司以后會(huì)不會(huì)讓我做前端去,做些簡單的實(shí)例既不需要花費(fèi)很多時(shí)間,也可以提高自己的自信和成就感,所以跟著明哥走,沒有錯(cuò),來吧!
一級(jí)菜單
實(shí)現(xiàn)最簡單的一級(jí)菜單
在之前的Aside.vue中去實(shí)現(xiàn)代碼,一級(jí)菜單其實(shí)非常的簡單,直接用el-menu 和el-menu-item 就行,Aside.vue代碼如下:
<template> <div> <el-menu> <el-menu-item>一級(jí)菜單1</el-menu-item> <el-menu-item>一級(jí)菜單2</el-menu-item> <el-menu-item>一級(jí)菜單3</el-menu-item> </el-menu> </div> </template> <script> export default { name: "Aside" } </script> <style scoped> </style>
效果圖如下:
設(shè)置菜單背景顏色和文字顏色
在el-menu中設(shè)置 background-color 和 text-color 屬性
<template> <div> <el-menu background-color="#545c64" text-color="#ffffff"> <el-menu-item>一級(jí)菜單1</el-menu-item> <el-menu-item>一級(jí)菜單2</el-menu-item> <el-menu-item>一級(jí)菜單3</el-menu-item> </el-menu> </div> </template>
設(shè)置選中后菜單文字顏色
設(shè)置 active-text-color 屬性,但是必須在需要生效的子菜單中設(shè)置index屬性,否則不生效,先不設(shè)置index
<template> <div> <el-menu background-color="#545c64" text-color="#ffffff" active-text-color="#ffd04b"> <el-menu-item>一級(jí)菜單1</el-menu-item> <el-menu-item>一級(jí)菜單2</el-menu-item> <el-menu-item>一級(jí)菜單3</el-menu-item> </el-menu> </div> </template>
可以看到我點(diǎn)擊以后,菜單文字的顏色沒有變化,現(xiàn)在來加入index屬性
<template> <div> <el-menu background-color="#545c64" text-color="#ffffff" active-text-color="#ffd04b"> <el-menu-item index="1">一級(jí)菜單1</el-menu-item> <el-menu-item index="2">一級(jí)菜單2</el-menu-item> <el-menu-item index="3">一級(jí)菜單3</el-menu-item> </el-menu> </div> </template>
上圖我們可以看到開始是沒有選中菜單的,是可以設(shè)置默認(rèn)的選中菜單的,設(shè)置default-active為對(duì)應(yīng)的index值即可,比如我設(shè)置默認(rèn)選中第2個(gè)菜單,第2個(gè)菜單的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">一級(jí)菜單1</el-menu-item> <el-menu-item index="2">一級(jí)菜單2</el-menu-item> <el-menu-item index="3">一級(jí)菜單3</el-menu-item> </el-menu> </div> </template>
刷新頁面后,默認(rèn)選中了第2個(gè)菜單
在菜單中加入圖標(biāo)
在菜單中加入圖標(biāo)會(huì)使得我們的菜單看起來比較漂亮、舒服,這樣涉及到圖標(biāo)的使用,可以參考我前面的文章 :Vue開發(fā)實(shí)例(08)之Icon圖標(biāo)的使用
用 i 標(biāo)簽即可,在菜單名前面加入 <i class=“el-icon-XXX”>,XXX是圖標(biāo)的名稱。
<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>一級(jí)菜單1</el-menu-item> <el-menu-item index="2"><i class="el-icon-document"></i>一級(jí)菜單2</el-menu-item> <el-menu-item index="3"><i class="el-icon-setting"></i>一級(jí)菜單3</el-menu-item> </el-menu> </div> </template>
二級(jí)菜單
實(shí)現(xiàn)二級(jí)菜單
修改一級(jí)菜單1為2級(jí)菜單
<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>一級(jí)菜單1</span></template> <el-menu-item index="1-1">選項(xiàng)1</el-menu-item> <el-menu-item index="1-2">選項(xiàng)2</el-menu-item> </el-submenu> <el-menu-item index="2"><i class="el-icon-document"></i>一級(jí)菜單2</el-menu-item> <el-menu-item index="3"><i class="el-icon-setting"></i>一級(jí)菜單3</el-menu-item> </el-menu> </div> </template>
修改分析【其實(shí)很簡單】:
- 將el-menu 修改為 el-submenu
- 按鈕名稱、圖標(biāo)用 template標(biāo)簽包裹,必須加入 slot="title"屬性,否則菜單樣式不對(duì)。
- 加入新的兩個(gè) el-menu-item。
三級(jí)菜單
實(shí)現(xiàn)三級(jí)菜單
跟二級(jí)菜單的修改方式是一樣的,就是多加一層
<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>一級(jí)菜單1</span></template> <el-submenu index="1-1"> <template slot="title"><i class="el-icon-location"></i><span>選項(xiàng)1</span></template> <el-menu-item index="1-1-1">選項(xiàng)1-1</el-menu-item> <el-menu-item index="1-1-2">選項(xiàng)1-2</el-menu-item> </el-submenu> <el-submenu index="1-2"> <template slot="title"><i class="el-icon-location"></i><span>選項(xiàng)2</span></template> <el-menu-item index="1-2-1">選項(xiàng)2-1</el-menu-item> <el-menu-item index="1-2-2">選項(xiàng)2-2</el-menu-item> </el-submenu> </el-submenu> <el-menu-item index="2"><i class="el-icon-document"></i>一級(jí)菜單2</el-menu-item> <el-menu-item index="3"><i class="el-icon-setting"></i>一級(jí)菜單3</el-menu-item> </el-menu> </div> </template> <script> export default { name: "Aside" } </script> <style scoped> </style>
加入相關(guān)事件
打開open、關(guān)閉close、選擇select 3個(gè)事件
在el-menu中加入三個(gè)事件屬性,并編寫對(duì)應(yīng)的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>一級(jí)菜單1</span></template> <el-submenu index="1-1"> <template slot="title"><i class="el-icon-location"></i><span>選項(xiàng)1</span></template> <el-menu-item index="1-1-1">選項(xiàng)1-1</el-menu-item> <el-menu-item index="1-1-2">選項(xiàng)1-2</el-menu-item> </el-submenu> <el-submenu index="1-2"> <template slot="title"><i class="el-icon-location"></i><span>選項(xiàng)2</span></template> <el-menu-item index="1-2-1">選項(xiàng)2-1</el-menu-item> <el-menu-item index="1-2-2">選項(xiàng)2-2</el-menu-item> </el-submenu> </el-submenu> <el-menu-item index="2"><i class="el-icon-document"></i>一級(jí)菜單2</el-menu-item> <el-menu-item index="3"><i class="el-icon-setting"></i>一級(jí)菜單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("關(guān)閉:",key, keyPath); }, handSelect(key, keyPath) { console.log("選擇:",key, keyPath); } } } </script> <style scoped> </style>
實(shí)現(xiàn)點(diǎn)擊菜單跳轉(zhuǎn)
當(dāng)點(diǎn)擊菜單項(xiàng),能夠在右邊的Main窗口中顯示對(duì)應(yīng)的頁面。
創(chuàng)建3個(gè)頁面 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,就是進(jìn)入的主頁面
- 這3個(gè)index子路由,用來跳轉(zhuǎn),分別對(duì)應(yīng) main1 main2 main3 幾個(gè)頁面。
- 子路由的跳轉(zhuǎn)位置為,index的Main位置,因?yàn)槲覀児芾硐到y(tǒng)只需要Main位置發(fā)生改變,頭部、左邊導(dǎo)航、下方footer是不需要改變的。
router.js如下:
import VueRouter from "vue-router" import Index from "./components/Index"; const routes = [ //一級(jí)路由 { 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中配置這個(gè)路由,讓路由生效
在原來的Index.vue頁面,設(shè)置路由跳轉(zhuǎn)位置,這里我們在原來的Main位置修改位 router-view即可。
菜單中加入路由配置
這里我們使用一級(jí)菜單,簡單方便,修改Aside.vue的代碼。
在el-menu里面加入 router屬性
在el-menu-item 的index,設(shè)置對(duì)應(yīng)的子路由
<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>一級(jí)菜單1</el-menu-item> <el-menu-item index="/index/menu2"><i class="el-icon-document"></i>一級(jí)菜單2</el-menu-item> <el-menu-item index="/index/menu3"><i class="el-icon-setting"></i>一級(jí)菜單3</el-menu-item> </el-menu> </div> </template> <script> export default { name: "Aside" } </script> <style scoped> .el-menu-vertical-demo{ height: 100%; } </style>
我們進(jìn)入index主路由
點(diǎn)擊左側(cè)導(dǎo)航菜單
處理默認(rèn)的Main窗口為空的情況
剛進(jìn)入index路由的時(shí)候,我們看到main窗口里面是沒有東西的
這樣顯然不好看,于是我們可以設(shè)置默認(rèn)的跳轉(zhuǎn)位置,設(shè)置如下:
- 在子路由中添加一個(gè)新的路由,用來默認(rèn)跳轉(zhuǎn)
- 在主路由中配置redirect 值為這個(gè)子路由
上方其實(shí)就是一個(gè)重定向的操作,當(dāng)直接輸入index路由時(shí)就會(huì)默認(rèn)跳轉(zhuǎn)到Main路由里面,這樣就會(huì)有個(gè)默認(rèn)的頁面了。
下方我們在地址欄只輸入到index,敲回車后,會(huì)在后面默認(rèn)加上 “/Main”,直接重定向了,同時(shí)Main窗口的頁面也顯示了我們指定的頁面。
小結(jié)
這節(jié)總結(jié)了“el-menu實(shí)現(xiàn)左側(cè)菜單導(dǎo)航”,希望能對(duì)大家有所幫助
到此這篇關(guān)于Vue el-menu 左側(cè) 菜單導(dǎo)航的文章就介紹到這了,更多相關(guān)Vue el-menu菜單導(dǎo)航內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue實(shí)現(xiàn)el-menu與el-tabs聯(lián)動(dòng)的項(xiàng)目實(shí)踐
- vue之el-menu-item如何更改導(dǎo)航菜單欄選中的背景顏色
- Vue3 Element-plus el-menu無限級(jí)菜單組件封裝過程
- vue實(shí)現(xiàn)el-menu和el-tab聯(lián)動(dòng)的示例代碼
- Vue中el-menu-item實(shí)現(xiàn)路由跳轉(zhuǎn)的完整步驟
- vue+el-menu實(shí)現(xiàn)菜單欄無限多層級(jí)分類
- vue2+el-menu實(shí)現(xiàn)路由跳轉(zhuǎn)及當(dāng)前項(xiàng)的設(shè)置方法實(shí)例
- vue使用elementui的el-menu的折疊菜單collapse示例詳解
相關(guān)文章
詳解vue-router數(shù)據(jù)加載與緩存使用總結(jié)
這篇文章主要介紹了詳解vue-router數(shù)據(jù)加載與緩存使用總結(jié),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10nginx部署訪問vue-cli搭建的項(xiàng)目的方法
本篇文章主要介紹了nginx部署訪問vue-cli搭建的項(xiàng)目的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02vite2打包的時(shí)候vendor-xxx.js文件過大的解決方法
vite2是一個(gè)非常好用的工具,只是隨著代碼的增多,打包的時(shí)候?vendor-xxxxxx.js?文件也越來越大,本文主要介紹了vite2打包的時(shí)候vendor-xxx.js文件過大的解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03vue項(xiàng)目中應(yīng)用ueditor自定義上傳按鈕功能
這篇文章主要介紹了vue項(xiàng)目中應(yīng)用ueditor自定義上傳按鈕功能,文中以vue-cli生成的項(xiàng)目為例給大家介紹了vue項(xiàng)目中使用ueditor的方法,感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-04-04vue中利用iscroll.js解決pc端滾動(dòng)問題
這篇文章主要介紹了vue中利用iscroll.js解決pc端滾動(dòng)問題,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02vue-cli 3.x配置跨域代理的實(shí)現(xiàn)方法
這篇文章主要介紹了vue-cli 3.x配置跨域代理的實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04vue項(xiàng)目實(shí)戰(zhàn)總結(jié)篇
離放假還有1天,今天小編抽空給大家分享前端時(shí)間小編做的vue項(xiàng)目,非常完整,需要的朋友參考下2018-02-02vue裁切預(yù)覽組件功能的實(shí)現(xiàn)步驟
這篇文章主要介紹了vue裁切預(yù)覽組件功能的實(shí)現(xiàn)代碼,本文通過實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05