解決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>
//重點(diǎn)在于:default-active="activerouter"的設(shè)置1.activerouter 掛在data 中
data() {
? ? return:activerouter;
}mounted() {
? ? this.activerouter = ?window.location.pathname
? ?//正常情況下加上這句話是可以解決的，如果解決不了，繼續(xù)往下看
? },2.給menuItem加點(diǎn)擊事件，路由地址作為參數(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)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
手動掛載Vue3.0組件到DOM節(jié)點(diǎn)的方法
在VUE應(yīng)用中,經(jīng)常會使用一些非vue實(shí)現(xiàn)的js庫,這些js庫可能要求外部傳入一些界面DOM節(jié)點(diǎn),本文主要介紹了手動掛載Vue3.0組件到DOM節(jié)點(diǎn)的方法,感興趣的可以了解一下2024-08-08
Vue和React都是流行的前端框架,它們有很多相似之處,如組件化和使用虛擬DOM,但是,它們在設(shè)計理念、組件存在形式、diff優(yōu)化和中文文檔方面存在一些不同,這篇文章給大家介紹面試官常問Vue和React區(qū)別,感興趣的朋友一起看看吧2025-02-02
Vue使用electron轉(zhuǎn)換項目成桌面應(yīng)用方法介紹
Electron也可以快速地將你的網(wǎng)站打包成一個原生應(yīng)用發(fā)布,下面這篇文章主要給大家介紹了關(guān)于Vue和React中快速使用Electron的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
淺談Vuex@2.3.0 中的 state 支持函數(shù)申明
這篇文章主要介紹了淺談Vuex@2.3.0 中的 state 支持函數(shù)申明，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
vue實(shí)現(xiàn)前進(jìn)刷新后退不刷新效果
這篇文章主要介紹了vue實(shí)現(xiàn)前進(jìn)刷新，后退不刷新效果,即加載過的界面能緩存起來（返回不用重新加載），關(guān)閉的界面能被銷毀掉（再進(jìn)入時重新加載）。本文給大家分享實(shí)現(xiàn)思路，需要的朋友可以參考下2018-01-01
如果你在 vue3 開發(fā)中使用了語法的話,對于組件的name屬性,需要做一番額外的處理,下面這篇文章主要給大家介紹了關(guān)于Vue3 setup語法糖的相關(guān)資料,需要的朋友可以參考下2022-12-12
vue-admin-template配置快捷導(dǎo)航的代碼（標(biāo)簽導(dǎo)航欄）
這篇文章主要介紹了vue-admin-template配置快捷導(dǎo)航的方法（標(biāo)簽導(dǎo)航欄），本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-09-09
這篇文章主要介紹了vue引用外部JS的兩種種方案,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2020-01-01
這篇文章主要介紹了Vue2與Vue3兄弟組件通訊bus的區(qū)別及用法，有需要的朋友可以借鑒參考下，希望可以有所幫助，祝大家多多進(jìn)步早日升職加薪2021-09-09
這篇文章主要介紹了Vue事件總線的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04