解決Element ui導(dǎo)航欄選中背景色刷新消失的問題
更新時間：2023年05月22日 15:19:39 作者：猴子都會我不會
這篇文章主要介紹了解決Element ui導(dǎo)航欄選中背景色刷新消失的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
Element ui導(dǎo)航欄選中背景色刷新消失
<el-menu
:is-collapse="isCollapse"
text-color="#fff"
active-text-color="#fff"
:default-active="activerouter"
:router="true"
>
</el-menu>
//重點在于:default-active="activerouter"的設(shè)置1.activerouter 掛在data 中
data() {
? ? return:activerouter;
}mounted() {
? ? this.activerouter = ?window.location.pathname
? ?//正常情況下加上這句話是可以解決的，如果解決不了，繼續(xù)往下看
? },2.給menuItem加點擊事件，路由地址作為參數(shù)
<el-menu-item
? ? ? ? ? ? :index="subItem.path"
? ? ? ? ? ? class="active_bg"
? ? ? ? ? ? :class="{ active_bg: index == activeIndex }"
? ? ? ? ? ? @click="selectMenuItem(subItem.path)"
? ? ? ? ? >
</el-menu-item>3.把拿到的路由地址保存在本地
selectMenuItem(path) {
? ? ? this.activerouter = path
? ? ? window.sessionStorage.setItem("activerouter", path);
? ? },
4.敲黑板注意，這個時候mounted()里面寫的就是如下了，就別再用location.pathname啦
mounted() {
? ? //獲取地址欄中的路由，設(shè)置elementui中的導(dǎo)航欄選中狀態(tài)
? ? this.activerouter = ?window.sessionStorage.getItem("activerouter");
? ? console.log('activerouter',this.activerouter)
? },Element ui導(dǎo)航欄選中高亮,刷新后選中消失
側(cè)邊菜單
導(dǎo)航欄選中后重新刷新頁面會發(fā)現(xiàn)選中的導(dǎo)航欄高亮消失了，或者跳到了其它選項，這里的思路就是定義方法，把路由存入到sessionStorage，頁面重新加載的時候從sessionStorage中獲取
<!--側(cè)邊菜單-->
? ? ? ? ?<el-menu :default-active="active" class="el-menu-vertical-demo" router>
? ? ? ? ? ? <router-link to="/user" style="text-decoration: none">
? ? ? ? ? ? ? <el-menu-item index="/user" v-if="isflag" @click="selectMenuItem('/user')">?
? ? ? ? ? ? ? ? <el-icon><User /></el-icon>
? ? ? ? ? ? ? ? <span>User Information</span>
? ? ? ? ? ? ? </el-menu-item>
? ? ? ? ? ? </router-link>
? ? ? ? ? ? <el-menu-item index="order" v-if="isflag" @click="selectMenuItem('order')">
? ? ? ? ? ? ? <el-icon><Tickets /></el-icon>
? ? ? ? ? ? ? <span>Order Management</span>
? ? ? ? ? ? </el-menu-item>
? ? ? ? ? ? <el-menu-item index="manage" v-if="userInfo.rolename=='op' ? false : true" @click="selectMenuItem('manage')">
? ? ? ? ? ? ? <el-icon><Reading /></el-icon>
? ? ? ? ? ? ? <span>Task Management</span>
? ? ? ? ? ? </el-menu-item>
? ? ? ? ? ? <el-menu-item index="task" v-if="isflag" @click="selectMenuItem('task')">
? ? ? ? ? ? ? <el-icon><Calendar /></el-icon>
? ? ? ? ? ? ? <span>Schedule</span>
? ? ? ? ? ? </el-menu-item>
? ? ? ? ? </el-menu>? data() {
? ? return {
? ? ? active: "/user",
? ? };
? },mounted(){
? ? this.active = ?window.sessionStorage.getItem("activerouter");
? },? methods: {
? ? selectMenuItem(path) {
? ? ? this.active = path
? ? ? window.sessionStorage.setItem("activerouter", path);
? ? },
? ?}?總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue-auto-focus: 控制自動聚焦行為的 vue 指令方法
今天小編就為大家分享一篇vue-auto-focus: 控制自動聚焦行為的 vue 指令方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue生命周期,結(jié)合實例形式分析了vue.js生命周期相關(guān)原理、步驟、函數(shù)與操作注意事項,需要的朋友可以參考下2018-08-08
reactive是Vue 3的Composition API中的一個函數(shù),它允許你創(chuàng)建一個響應(yīng)式的數(shù)據(jù)對象,本文主要介紹了深入理解Vue.js3中Reactive的實現(xiàn),感興趣的可以了解一下2024-01-01
Vue 3中常用的生命周期鉤子和監(jiān)聽器的操作方法
這篇文章主要介紹了Vue 3中常用的生命周期鉤子和監(jiān)聽器的操作方法,分析常用的一些生命周期鉤子和監(jiān)聽器可以幫助我們在組件中處理數(shù)據(jù)加載、狀態(tài)變化和響應(yīng)式更新,需要的朋友可以參考下2024-07-07
uniapp使用webview內(nèi)嵌H5的注意事項詳解
在移動應(yīng)用開發(fā)中,uniApp框架提供了一種跨平臺的解決方案,允許開發(fā)者使用一套代碼來構(gòu)建iOS、Android等多平臺的應(yīng)用,這篇文章主要給大家介紹了關(guān)于uniapp使用webview內(nèi)嵌H5的注意事項,需要的朋友可以參考下2024-07-07
我們通過實例代碼給大家分享了Vue中watch的高級用法，對此知識點有需要的朋友可以跟著學(xué)習(xí)下。2018-05-05
這篇文章主要給大家介紹了關(guān)于如何使用Vue3構(gòu)建一個圖像畫廊(支持圖片上傳)的相關(guān)資料,Vue畫廊這是vue編寫的圖庫應(yīng)用程序,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了vscode中Vue別名路徑提示的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
el-table 選擇框根據(jù)條件設(shè)置某項不可選中的操作代碼
這篇文章主要介紹了el-table 選擇框根據(jù)條件設(shè)置某項不可選中的操作代碼,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
這篇文章主要介紹了在vue項目中封裝echarts的步驟，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12