甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

QQ :532337155
电话：028-86922220
 
成都网站建设设计

将想法与焦点和您一起共享

vuejs切换导航条高亮(路由菜单高亮)的方法示例

我的GitHub前端经验总结，喜欢的话请点star:Thanks.: https://github.com/liangfengbo/frontend-develop

乳山网站建设公司创新互联建站,乳山网站设计制作，有大型网站制作公司丰富经验。已为乳山上千家提供企业网站建设服务。企业网站搭建\成都外贸网站建设公司要多少钱，请找那个售后服务好的乳山做网站的公司定做！

vuejs导航条高亮我的做法：

  1. 用一个数组存导航条，用v-for循环它，这样可以减少代码，二可以使用它的下标来判断高亮，三还可以获取后端的导航信息来遍历
  2. 重点是在：routerLink(index, path)函数，传入当前点击的下标，自定义一个下标，判断是否相等就用三元符号判断多给一个高亮样式
  3. 如何解决刷新就不高亮或第一个高亮了，很简单，监听一下当前路由在判断就好了

具体代码都在下面了

效果图：

vuejs 切换导航条高亮(路由菜单高亮)的方法示例

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;
}

    以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。


    文章名称：vuejs切换导航条高亮(路由菜单高亮)的方法示例
    当前地址：http://chengdu.cdxwcx.cn/article/pipgpg.html

    其他资讯