vue + element-ui 製做下拉菜單（可配置路由、可根據路由高亮list、可刷新自動展開定位路由）

本篇文章分享一篇關於 vue製做可路由切換組件、可刷新根據路由定位導航（自動展開）、可根據路由高亮對應導航選項

1、實現的功能以下：

一、可摺疊導航面板

二、點擊導航路由不一樣組件

            

三、在當前頁f5刷新，或者在url輸入對應的路由地址，會根據路由打開左側導航對應的位置而且展開、高亮

 

2、代碼詳情

一、main.js

import Vue from 'vue' import App from './App' import router from './router'
//引入element-ui
import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css'


// 註冊elementUi組件 Vue.use(ElementUI) Vue.config.productionTip = false

/* eslint-disable no-new */ let gvm = new Vue({ el: '#app', router, components: { App }, template: '<App/>' })

二、navSlideBar.vue

<template>
    <div class="navslidebar">
        <div class="navHeaderbar"></div>
        <el-menu :default-active="$route.path" router class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#2aaae4" :unique-opened="uniqueOpened" text-color="#fff" active-text-color="#ffd04b">
            <el-menu-item class="oneLi" v-for="(item, i) in navList" :key="i" :index="item.name" @click="haha">
                <i style="font-size:14px; color:#fff" class="el-icon-document"></i>
                <span slot="title">{{$t(item.navItem)}}</span>
            </el-menu-item>
            <el-submenu v-for="(item,index) in subNavList" :key="index+1" :index="item.name">
                <template slot="title">
                    <i style="font-size:14px; color:#fff" class="el-icon-document"></i>
                    <span @click="haha">{{$t(item.navItem)}}</span>
                </template>
                <el-menu-item class="SubLi" v-for="(subItem, subIndex) in item.children" :key="subIndex" :index="subItem.name">
                    <p><span></span><span></span></p> {{$t(subItem.navItem)}} </el-menu-item>
            </el-submenu>
            <el-menu-item class="oneLi" key="-1" index="/download">
                <i style="font-size:14px; color:#fff" class="el-icon-document"></i>
                <span slot="title">{{$t("slideBar.download")}}</span>
            </el-menu-item>
        </el-menu>
    </div>
</template>

template

<script> export default { name: "NavSlidebar", data() { return { uniqueOpened: true, //只打開一個二級導航
 navList: [{ name: "/overall", navItem: "slideBar.overall" }], subNavList: [{ name: "/servicevolume", navItem: "slideBar.servicevolume", children: [{ name: "/visitvolume", navItem: "slideBar.visitvolume" }, { name: "/users", navItem: "slideBar.users" }, // {
                            // name: "/multimediausage",
                            // navItem: "slideBar.multimediausage"
                            // }
 ] }, { name: "/servicefficiency", navItem: "slideBar.servicefficiency", children: [{ name: "/solvedstatus", navItem: "slideBar.solvedstatus" }, { name: "/transferredrate", navItem: "slideBar.transferredrate" }, // {
                            // name: "/cast",
                            // navItem: "slideBar.cast"
                            // }
 ] }, { name: "/kgperformance", navItem: "slideBar.kgperformance", children: [{ name: "/question", navItem: "slideBar.question" }, // {
                            // name: "/outofscopeanalysis",
                            // navItem: "slideBar.outofscopeanalysis"
                            // }
 ] }, { name: "/sessionflow", navItem: "slideBar.sessionflow", children: [{ name: "/handingtime", navItem: "slideBar.handingtime" }, { name: "/handingturns", navItem: "slideBar.handingturns" }, { name: "/leavingstatus", navItem: "slideBar.leavingstatus" }, { name: "/customerjourney", navItem: "slideBar.customerjourney" } ] } ] }; }, methods: { haha() {}, handleOpen(key, keyPath) { //console.log(key, keyPath);
 }, handleClose(key, keyPath) { //console.log(key, keyPath);
 } }, computed: {} }; </script>

script

<style> div.navHeaderbar { height: 48px;
        /* background: url("~@/assets/navHead.jpg") center no-repeat; */ background: url("./../../../../static/image/navHead.jpg") center no-repeat; background-size: auto 48px;
    } .el-menu { border-right: none !important;
    }
    /* 一級導航劃入顏色 */ .oneLi:focus, .oneLi:hover { background-color: #2bace580 !important;
    } .el-submenu__title:hover { background-color: #2bace580 !important;
    } .SubLi { position: relative; background-color: #239ACA !important; font-size: 13px;
    } .el-menu-item, .el-submenu__title { height: 40px !important; line-height: 40px !important;
        /* padding-left: 15px !important; */
    } .el-submenu .el-menu-item { height: 40px !important; line-height: 40px !important;
    } .el-submenu__title i { color: #fff !important; font-size: 14px;
    } .SubLi>p { width: 15px; height: 40px; position: absolute; left: 20px; top: 0;
    } .SubLi>p>span { display: block; width: 15px; height: 50%; opacity: .2; border-left: 1px solid #fff;
    } .SubLi>p>span:first-child { border-bottom: 1px solid #fff;
    } .SubLi:hover { background-color: rgba(8, 15, 39, 0.3) !important } </style>

style

三、AppMain.vue

 1 <template>
 2     <div class="appmain">
 3         <router-view></router-view>
 4     </div>
 5 </template>
 6 
 7 <script>
 8     export default {  9         name: 'AppMain', 10  } 11 </script>
12 
13 <style scoped>
14 div.appmain{ 15     flex-grow: 1; 16  display: flex; 17     flex-direction: column; 18  padding: 15px; 19     padding-top: 0; 20  overflow: hidden; 21 } 22 </style>

路由輸出的模塊

四、router/index.js

import Vue from 'vue' import Router from 'vue-router' import index from '@/views/layout/index'

//一級路由組件引入
import Overall from '@/views/Overall/Overall'

//ServiceVolume
import VisitVolume from '@/views/ServiceVolume/VisitVolume' import Users from '@/views/ServiceVolume/Users' import MultimediaUsage from '@/views/ServiceVolume/MultimediaUsage'

//ServicEfficiency
import CASTs from '@/views/ServicEfficiency/CAST' import SolvedStatus from '@/views/ServicEfficiency/SolvedStatus' import TransferredRate from '@/views/ServicEfficiency/TransferredRate'

//KgPerformance
import Question from '@/views/KgPerformance/Question'

//SessionFlow
import CustomerJourney from '@/views/SessionFlow/CustomerJourney' import HandingTime from '@/views/SessionFlow/HandingTime' import HandingTurns from '@/views/SessionFlow/HandingTurns' import LeavingStatus from '@/views/SessionFlow/LeavingStatus'

//DownLoad
import DownLoad from '@/views/DownLoad/DownLoad' Vue.use(Router) export default new Router({ // mode: 'history',
 routes: [ { path: '*', redirect: '/overall' }, { path: '/index', name: 'index', component: Overall }, { path: '/overall', name: 'overall', component: Overall }, { path: '/visitvolume', name: 'visitvolume', component: VisitVolume }, { path: '/users', name: 'users', component: Users }, { path: '/multimediausage', name: 'multimediausage', component: MultimediaUsage }, { path: '/cast', name: 'cast', component: CASTs }, { path: '/solvedstatus', name: 'solvedstatus', component: SolvedStatus }, { path: '/transferredrate', name: 'transferredrate', component: TransferredRate }, { path: '/question', name: 'question', component: Question }, { path: '/handingtime', name: 'handingtime', component: HandingTime }, { path: '/handingturns', name: 'handingturns', component: HandingTurns }, { path: '/leavingstatus', name: 'leavingstatus', component: LeavingStatus }, { path: '/customerjourney', name: 'customerjourney', component: CustomerJourney }, { path: '/download', name: 'download', component: DownLoad }, ] })

router/index.js

 

3、模板重點參數解釋：

一、整個導航外層包裹的組件名稱

1 <el-menu :default-active="$route.path" router @open="handleOpen" @close="handleClose"><el-menu>

default-active：指的是默認選中導航的哪一項，當前指定的是，當前route的path屬性。這裏的path和模板中的：index的綁定是一 一對應的（後面會介紹）。

router：是否使用vue-router進行路由跳轉，寫上此參數便啓用。啓用此模式後，會在激活導航時以 index 做爲路由的 path 進行路由跳轉。

 

二、這一組是不可展開的，也就是一級導航的標記，直接就是el-menu-item，下面是重點參數解釋：

<el-menu-item class="oneLi" v-for="(item, i) in navList" :key="i" :index="item.name" @click="haha">
    <i style="font-size:14px; color:#fff" class="el-icon-document"></i>
    <span slot="title">{{$t(item.navItem)}}</span>
</el-menu-item>

index：指的是每個導航的惟一標誌，用來和上面：default-acitve的值對應，而後自動操做高亮選中。

 

三、二級導航的組件：slot="title"的這個標記是顯示二級導航名稱的標記。 el-menu-item這個標記是真正點擊路由不一樣組件的標記。

<el-submenu v-for="(item,index) in subNavList" :key="index+1" :index="item.name">
    <template slot="title">
    　　<i style="font-size:14px; color:#fff" class="el-icon-document"></i>
    　　<span @click="haha">{{$t(item.navItem)}}</span>
    </template>
    <el-menu-item class="SubLi" v-for="(subItem, subIndex) in item.children" :key="subIndex" :index="subItem.name">
        <p><span></span><span></span></p>  {{$t(subItem.navItem)}} </el-menu-item>
</el-submenu>

el-submenu 的 index： 指的是每個導航的惟一標誌，用來和上面：default-acitve的值對應，而後自動操做高亮選中。

el-menu-item的index：指的是每個導航的惟一標誌，用來和上面：default-acitve的值對應，而後自動操做高亮選中。

 

注意：

　　本篇文章請忽略模板中相似 {{$t("slideBar.download")}} 表達式。 調用的是國際化i18n插件，我的在項目中用了國際化插件。這部分在對應的script中能夠改爲本身想顯示的信息，若有不懂的地方，歡迎交流，留言。

 

4、element官方的詳細API

  Menu Attribute ： 外層包裹元素的屬性（el-menu）

參數	說明	類型	可選值	默認值
mode	模式	string	horizontal / vertical	vertical
collapse	是否水平摺疊收起菜單（僅在 mode 爲 vertical 時可用）	boolean	—	false
background-color	菜單的背景色（僅支持 hex 格式）	string	—	#ffffff
text-color	菜單的文字顏色（僅支持 hex 格式）	string	—	#303133
active-text-color	當前激活菜單的文字顏色（僅支持 hex 格式）	string	—	#409EFF
default-active	當前激活菜單的 index	string	—	—
default-openeds	當前打開的 sub-menu 的 index 的數組	Array	—	—
unique-opened	是否只保持一個子菜單的展開	boolean	—	false
menu-trigger	子菜單打開的觸發方式(只在 mode 爲 horizontal 時有效)	string	hover / click	hover
router	是否使用 vue-router 的模式，啓用該模式會在激活導航時以 index 做爲 path 進行路由跳轉	boolean	—	false
collapse-transition	是否開啓摺疊動畫	boolean	—	true

 

 Menu Methods：外層包裹元素的方法（el-menu）

方法名稱	說明	參數
open	展開指定的 sub-menu	index: 須要打開的 sub-menu 的 index
close	收起指定的 sub-menu	index: 須要收起的 sub-menu 的 index

 

 

 Menu Events：外層包裹元素的事件（el-menu）

 

事件名稱	說明	回調參數
select	菜單激活回調	index: 選中菜單項的 index, indexPath: 選中菜單項的 index path
open	sub-menu 展開的回調	index: 打開的 sub-menu 的 index， indexPath: 打開的 sub-menu 的 index path
close	sub-menu 收起的回調	index: 收起的 sub-menu 的 index， indexPath: 收起的 sub-menu 的 index path

 

 

 

 SubMenu Attribute：二級導航的包裹元素的屬性（el-submenu）

 

參數	說明	類型	可選值	默認值
index	惟一標誌	string	—	—
popper-class	彈出菜單的自定義類名	string	—	—
show-timeout	展開 sub-menu 的延時	number	—	300
hide-timeout	收起 sub-menu 的延時	number	—	300
disabled	是否禁用	boolean	—	false
popper-append-to-body	是否將彈出菜單插入至 body 元素。在菜單的定位出現問題時，可嘗試修改該屬性	boolean	—	一級子菜單：true / 非一級子菜單：false

 

  Menu-Item Attribute：每個可點擊跳轉的選項元素的屬性（el-menu-item）

參數	說明	類型	可選值	默認值
index	惟一標誌	string	—	—
route	Vue Router 路徑對象	Object	—	—
disabled	是否禁用	boolean	—	false

 

 

最後：

　　本文檔意在與幫助初學者快速構建vue項目，雖沒什麼技術含量。但不要隨意轉載，如需轉載保存，請署上 轉載地址。謝謝配合。

有問題隨時交流，不怕打擾。

原文出處：https://www.cnblogs.com/wangweizhang/p/10240759.html