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導航欄高亮顯示的解決方式就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue3+elementPlus實現(xiàn)年份選擇器
這篇文章主要為大家詳細介紹了vue3如何通過elementPlus實現(xiàn)一個簡單的年份選擇器,文中的示例代碼講解詳細,需要的小伙伴可以跟隨小編一起學習一下
2024-01-01
vue使用swiper的時候第二輪事件不會觸發(fā)問題
這篇文章主要介紹了vue使用swiper的時候第二輪事件不會觸發(fā)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue中render函數(shù)和h函數(shù)以及jsx的使用方式
這篇文章主要介紹了vue中render函數(shù)和h函數(shù)以及jsx的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
vue init webpack myproject構(gòu)建項目 ip不能訪問的解決方法
下面小編就為大家分享一篇vue init webpack myproject構(gòu)建項目 ip不能訪問的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
vue.js利用defineProperty實現(xiàn)數(shù)據(jù)的雙向綁定
本篇文章主要介紹了用Node.js當作后臺、jQuery寫前臺AJAX代碼實現(xiàn)用戶登錄和注冊的功能的相關知識。具有很好的參考價值。下面跟著小編一起來看下吧
2017-04-04
Vuejs仿網(wǎng)易云音樂實現(xiàn)聽歌及搜索功能
這篇文章主要介紹了Vuejs仿網(wǎng)易云音樂實現(xiàn)聽歌及搜索功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2017-03-03
vue+elementUI面包屑組件封裝方法詳解
這篇文章主要為大家詳細介紹了vue+elementUI面包屑組件封裝方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
12 種使用Vue 的最佳做法
這篇文章主要介紹了12 種使用Vue 的最佳做法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-03-03
使用vue-cli搭建SPA項目的詳細過程
vue-cli是vue.js的腳手架，用于自動生成vue.js+webpack的項目模板，本文通過實例代碼給大家介紹vue-cli搭建SPA項目的詳細過程，感興趣的朋友跟隨小編一起看看吧
2022-09-09
vue3+vite+SQL.js如何讀取db3文件數(shù)據(jù)
這篇文章主要介紹了vue3+vite+SQL.js如何讀取db3文件數(shù)據(jù)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-05-05