vue+element導(dǎo)航欄高亮顯示的解決方式
用導(dǎo)航菜單時(shí)遇到的一些問(wèn)題：點(diǎn)擊打開(kāi)官網(wǎng)例子
問(wèn)題1：
頁(yè)面強(qiáng)制刷新，按F5時(shí)，頁(yè)面如果沒(méi)有好好設(shè)置的話，導(dǎo)航欄默認(rèn)疊起來(lái)，而且無(wú)高亮顯示；刷新后導(dǎo)航欄顯示和之前不一致，如圖所示
解決：
html關(guān)鍵代碼設(shè)置 :default-active="defaultUrl"
這兒的原理就是defaultUrl跟#/后面的一致，也就是說(shuō)跟router.js中的path一致才行（router.js見(jiàn)后文）
window.location.href.split('/#')[1] 獲取的是"http://localhost:8080/#/search-contact/1"中的"/search-contact/1"
這樣設(shè)置后，無(wú)論如何刷新頁(yè)面，頁(yè)面都會(huì)高亮顯示當(dāng)前url
問(wèn)題2：
點(diǎn)擊瀏覽器前進(jìn)后退按鈕導(dǎo)致高亮顯示不同步，
解決問(wèn)題關(guān)鍵，和問(wèn)題一原理一樣，當(dāng)路由變化時(shí)，改變默認(rèn)顯示高亮的值
//監(jiān)聽(tīng)路由變化
watch: {
'$route':'getPath'
},
methods: {
getPath(){
this.defaultUrl = this.$route.path;
}
},
補(bǔ)充：
以上，div和js文件在設(shè)置菜單欄的menu.vue文件下。
router.js里面這樣設(shè)置
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
import Home from './views/home';
import SearchProperty from './views/search/search-property';
import SearchListing from './views/search/search-listing';
import SearchContact from './views/search/search-contact';
import SearchSchool from './views/search/search-school';
export default new Router({
routes: [
{name: 'home', path: '/', component: Home},
{name: 'search-property', path: '/search-property/:pageNum', component: SearchProperty},
{name: 'search-contact', path: '/search-contact/:pageNum', component: SearchContact},
{name: 'search-listing', path: '/search-listing/:pageNum', component: SearchListing},
{name: 'search-school', path: '/search-school/:pageNum', component: SearchSchool},
],
});
補(bǔ)充：這是目前發(fā)現(xiàn)最簡(jiǎn)單的一種方法
<el-menu router :default-active="$route.path"> </el-menu>
以上這篇vue+element導(dǎo)航欄高亮顯示的解決方式就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3+elementPlus實(shí)現(xiàn)年份選擇器
這篇文章主要為大家詳細(xì)介紹了vue3如何通過(guò)elementPlus實(shí)現(xiàn)一個(gè)簡(jiǎn)單的年份選擇器,文中的示例代碼講解詳細(xì),需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
vue使用swiper的時(shí)候第二輪事件不會(huì)觸發(fā)問(wèn)題
這篇文章主要介紹了vue使用swiper的時(shí)候第二輪事件不會(huì)觸發(fā)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue中render函數(shù)和h函數(shù)以及jsx的使用方式
這篇文章主要介紹了vue中render函數(shù)和h函數(shù)以及jsx的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue init webpack myproject構(gòu)建項(xiàng)目 ip不能訪問(wèn)的解決方法
下面小編就為大家分享一篇vue init webpack myproject構(gòu)建項(xiàng)目 ip不能訪問(wèn)的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue.js利用defineProperty實(shí)現(xiàn)數(shù)據(jù)的雙向綁定
本篇文章主要介紹了用Node.js當(dāng)作后臺(tái)、jQuery寫(xiě)前臺(tái)AJAX代碼實(shí)現(xiàn)用戶登錄和注冊(cè)的功能的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04
Vuejs仿網(wǎng)易云音樂(lè)實(shí)現(xiàn)聽(tīng)歌及搜索功能
這篇文章主要介紹了Vuejs仿網(wǎng)易云音樂(lè)實(shí)現(xiàn)聽(tīng)歌及搜索功能,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-03-03
這篇文章主要為大家詳細(xì)介紹了vue+elementUI面包屑組件封裝方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了12 種使用Vue 的最佳做法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
使用vue-cli搭建SPA項(xiàng)目的詳細(xì)過(guò)程
vue-cli是vue.js的腳手架，用于自動(dòng)生成vue.js+webpack的項(xiàng)目模板，本文通過(guò)實(shí)例代碼給大家介紹vue-cli搭建SPA項(xiàng)目的詳細(xì)過(guò)程，感興趣的朋友跟隨小編一起看看吧2022-09-09
vue3+vite+SQL.js如何讀取db3文件數(shù)據(jù)
這篇文章主要介紹了vue3+vite+SQL.js如何讀取db3文件數(shù)據(jù)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05