vuejs切換導航條高亮路由高亮做法

jerryloveemily 發布于2019-08-26 11:54 / 2279人閱讀

摘要：我的前端經驗總結，喜歡的話請點導航條高亮我的做法用一個數組存導航條，用循環它，這樣可以減少代碼，二可以使用它的下標來判斷高亮，三還可以獲取后端的導航信息來遍歷重點是在函數，傳入當前點擊的下標，自定義一個下標，判斷是否相等就用三元符號判斷

我的GitHub前端經驗總結，喜歡的話請點star??Thanks.:https://github.com/liangfengbo/frontend-develop

vuejs導航條高亮我的做法：

用一個數組存導航條，用v-for循環它，這樣可以減少代碼，二可以使用它的下標來判斷高亮，三還可以獲取后端的導航信息來遍歷

重點是在：routerLink(index, path)函數，傳入當前點擊的下標，自定義一個下標，判斷是否相等就用三元符號判斷多給一個高亮樣式

如何解決刷新就不高亮或第一個高亮了，很簡單，監聽一下當前路由在判斷就好了

具體代碼都在下面了

效果圖：

html代碼





 
  
    {{ item.title }}
  
  
  
    {{ item.en }}

data數據

// 導航條
data() {
  return {
    nav: [
      {title: "首頁", en: "Code", path: "/"},
      {title: "開源", en: "Source", path: "/source"},
      {title: "關于", en: "About", path: "/about"},
    ],
    navIndex: 0,
  }
},

methods方法：

/**
 * 路由跳轉
 * @param index
 * @param link
*/
routerLink(index, path) {
  // 點擊哪個路由就賦值給自定義的下下標
  this.navIndex = index;
  // 路由跳轉
  this.$router.push(path)
},

/**
 * 檢索當前路徑
 * @param path
*/
checkRouterLocal(path) {
  // 查找當前路由下標高亮
  this.navIndex = this.nav.findIndex(item => item.path === path);
}

監聽路由變化獲取當前路由

watch: {
  "$route"() {
    // 獲取當前路徑
    let path = this.$route.path;
    // 檢索當前路徑
    this.checkRouterLocal(path);
  }
},

css樣式

.nav-box {
  display: flex;
}

.nav-item {
  text-align: center;
  padding: 0 32px;
  position: relative;
  display: inline-block;
  font-size: 14px;
  line-height: 25px;
}

/*導航普通狀態*/
.item-cn {
  color: #1c2438;
  font-weight: 800;
}

/*導航普通狀態*/
.item-en {
  color: #666;
  font-size: 12px;
}

/*導航高亮*/
.item-cn-active {
  color: #2d8cf0;
}

/*導航高亮*/
.item-en-active {
  color: #5cadff;
}

.nav-item:hover .item-cn {
  color: #2d8cf0;
}

.nav-item:hover .item-en {
  color: #5cadff;
}

.nav-item:after {
  position: absolute;
  right: 0;
  top: 20px;
  content: "";
  width: 1px;
  height: 16px;
  background-color: #f8f8f8;
}

.nav-item:after:last-child {
  width: 0;
}

云服務器 GPU云服務器行高亮背景高亮高亮效果高亮展示

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/107786.html

【Vue.js】vue-router實現二級導航切換路由及高亮顯示

摘要：這里以網易云音樂作為示例，效果圖我們先一層一層寫導航先設計第一層設計導航頁面樣式第一個導航頁面為發現第二個導航頁面為其余代碼一樣，注意要把改為相應路由配置路由使用制作導航我們創建一個新組件把他插入到中設計好路由的數據源發現音樂我的這里以網易云音樂作為示例，效果圖： showImg(https://segmentfault.com/img/bVbuOO3?w=2160&h=224); ...

blair 2019-08-23 18:33 評論0 收藏0
vue 仿今日頭條

摘要：在下沒有該問題。解決辦法部分這里隨意，需要用設定部分問題懶加載解決方法稍后補充參考文獻組件按需加載路由懶加載項目中使用將多個組件合并打包并實現按需加載 vue 仿今日頭條為了增加移動端項目的經驗，近一周通過 vue 仿寫今日頭條，以下就項目實現過程中遇到的問題以及解決方法給出總結，有什么不正確的地方，懇請大家批評指正^?_?^！，代碼倉庫地址為 github 一、實現功能首頁展示...

ShowerSun 2019-08-29 16:16 評論0 收藏0
vue 仿今日頭條

摘要：在下沒有該問題。解決辦法部分這里隨意，需要用設定部分問題懶加載解決方法稍后補充參考文獻組件按需加載路由懶加載項目中使用將多個組件合并打包并實現按需加載 vue 仿今日頭條為了增加移動端項目的經驗，近一周通過 vue 仿寫今日頭條，以下就項目實現過程中遇到的問題以及解決方法給出總結，有什么不正確的地方，懇請大家批評指正^?_?^！，代碼倉庫地址為 github 一、實現功能首頁展示...

Sourcelink 2019-08-23 10:40 評論0 收藏0
vue使用原生js實現滾動頁面跟蹤導航高亮

摘要：需要使用做一個專題頁面。滾動頁面指定區域導航高亮。監聽滾動頁面事件，對比當前頁面的位置與元素的位置，如果當前滾動的區域位置大于元素的位置，導航添加，其他去掉進行樣式切換。需要使用vue做一個專題頁面。滾動頁面指定區域導航高亮。監聽滾動頁面事件，對比當前頁面的位置與元素的位置，如果當前滾動的區域位置大于元素的位置，導航添加class，其他去掉class進行樣式切換。 ...

bluesky 2019-08-29 17:03 評論0 收藏0
vue使用原生js實現滾動頁面跟蹤導航高亮

摘要：需要使用做一個專題頁面。滾動頁面指定區域導航高亮。監聽滾動頁面事件，對比當前頁面的位置與元素的位置，如果當前滾動的區域位置大于元素的位置，導航添加，其他去掉進行樣式切換。需要使用vue做一個專題頁面。滾動頁面指定區域導航高亮。監聽滾動頁面事件，對比當前頁面的位置與元素的位置，如果當前滾動的區域位置大于元素的位置，導航添加class，其他去掉class進行樣式切換。 ...

YanceyOfficial 2019-08-23 12:32 評論0 收藏0