vuejs切换导航条高亮路由高亮做法

jerryloveemily 发布于2019-08-26 11:54 / 2242人阅读

摘要：我的前端经验总结，喜欢的话请点导航条高亮我的做法用一个数组存导航条，用循环它，这样可以减少代码，二可以使用它的下标来判断高亮，三还可以获取后端的导航信息来遍历重点是在函数，传入当前点击的下标，自定义一个下标，判断是否相等就用三元符号判断

我的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云服务器云服务器行高亮背景高亮高亮效果高亮展示

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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