欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2019年11月12日 10:37:00   作者:juan_taylor  
今天小編就為大家分享一篇vue+element導(dǎo)航欄高亮顯示的解決方式,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧

用導(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)文章

最新評論