欧美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)文章

最新評論