vue+element導(dǎo)航欄高亮顯示的解決方式

用導(dǎo)航菜單時(shí)遇到的一些問(wèn)題：點(diǎn)擊打開官網(wǎng)例子

成都創(chuàng)新互聯(lián)公司-成都網(wǎng)站建設(shè)公司，專注做網(wǎng)站、網(wǎng)站建設(shè)、網(wǎng)站營(yíng)銷推廣，申請(qǐng)域名，網(wǎng)絡(luò)空間，網(wǎng)站托管有關(guān)企業(yè)網(wǎng)站制作方案、改版、費(fèi)用等問(wèn)題，請(qǐng)聯(lián)系成都創(chuàng)新互聯(lián)公司。

問(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見后文）

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)聽路由變化
  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è)參考，也希望大家多多支持創(chuàng)新互聯(lián)。

本文標(biāo)題：vue+element導(dǎo)航欄高亮顯示的解決方式
當(dāng)前網(wǎng)址：http://muchs.cn/article38/ihcipp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、網(wǎng)站建設(shè)、云服務(wù)器、面包屑導(dǎo)航、建站公司、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)