vue+element導(dǎo)航欄高亮顯示的解決方式
用導(dǎo)航菜單時(shí)遇到的一些問題:點(diǎn)擊打開官網(wǎng)例子
問題1:
頁面強(qiáng)制刷新,按F5時(shí),頁面如果沒有好好設(shè)置的話,導(dǎo)航欄默認(rèn)疊起來,而且無高亮顯示;刷新后導(dǎo)航欄顯示和之前不一致,如圖所示
解決:
html關(guān)鍵代碼設(shè)置 :default-active="defaultUrl"
這兒的原理就是defaultUrl跟#/后面的一致,也就是說跟router.js中的path一致才行(router.js見后文)
window.location.href.split('/#')[1] 獲取的是"http://localhost:8080/#/search-contact/1"中的"/search-contact/1"
這樣設(shè)置后,無論如何刷新頁面,頁面都會高亮顯示當(dāng)前url
問題2:
點(diǎn)擊瀏覽器前進(jìn)后退按鈕導(dǎo)致高亮顯示不同步,
解決問題關(guān)鍵,和問題一原理一樣,當(dāng)路由變化時(shí),改變默認(rèn)顯示高亮的值
//監(jiān)聽路由變化 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)最簡單的一種方法
<el-menu router :default-active="$route.path"> </el-menu>
以上這篇vue+element導(dǎo)航欄高亮顯示的解決方式就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
在Vue中如何實(shí)現(xiàn)打字機(jī)的效果
這篇文章主要介紹了在Vue中如何實(shí)現(xiàn)打字機(jī)的效果,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-07-07詳解Vue iview IE瀏覽器不兼容報(bào)錯(Iview Bable polyfill)
這篇文章主要介紹了Vue iview IE瀏覽器不兼容報(bào)錯的決絕方法,由于Iview編譯使用到了es6的一些新特性,但是在IE中不支持ES6的新特性,本文就介紹一下如何解決這些問題2019-01-01解決使用vue-awesome-swiper組件手動滾動點(diǎn)擊失效問題
這篇文章主要介紹了使用vue-awesome-swiper組件手動滾動點(diǎn)擊失效問題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06Vue中調(diào)用組件使用kebab-case短橫線命名法和使用大駝峰的區(qū)別詳解
這篇文章主要介紹了Vue中調(diào)用組件使用kebab-case(短橫線)命名法和使用大駝峰的區(qū)別,通過實(shí)例可以看出如果是在html中使用組件,那么就不能用大駝峰式寫法,如果是在.vue?文件中就可以,需要的朋友可以參考下2023-10-10vuejs實(shí)現(xiàn)折疊面板展開收縮動畫效果
這篇文章主要介紹了vuejs實(shí)現(xiàn)折疊面板展開收縮動畫效果,文中通過代碼給大家分享兩種情況介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09Vue 父子組件的數(shù)據(jù)傳遞、修改和更新方法
下面小編就為大家分享一篇Vue 父子組件的數(shù)據(jù)傳遞、修改和更新方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03使用vue-aplayer插件時(shí)出現(xiàn)的問題的解決
這篇文章主要介紹了使用vue-aplayer插件時(shí)出現(xiàn)的問題的解決,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03