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