vuejs导航条动态切换active状态

摘要:
Liclass=“nav item”v-for=“(item;key=“index”>class=“navIndex==index;'active':{{item.title}}}&lt:data(){return{nav;path:/**路由跳转*@paramindex*@paramlink*/routerLink(索引,
  1. 用一个数组存导航条,用v-for循环它,这样可以减少代码,二可以使用它的下标来判断高亮,三还可以获取后端的导航信息来遍历
  2. 重点是在:routerLink(index, path)函数,传入当前点击的下标,自定义一个下标,判断是否相等就用三元符号判断多给一个高亮样式
  3. 如何解决刷新就不高亮或第一个高亮了,很简单,监听一下当前路由在判断就好了

具体代码都在下面了

效果图:

vuejs导航条动态切换active状态第1张

html代码:

     <ul>
         <!-- 导航列表 -->
        <li class="nav-item"
                  v-for="(item, index) in nav"
                    @click="routerLink(index, item.path)"
                    :key="index">
                    <!-- 判断高亮表 -->
                    <p :class=" navIndex === index ? 'active' : ''">
                    {{ item.title }}
                    </p>
         </li>                                         
     </ul>                

 data数据:

data(){
        return{
            nav:[
                {title:'首页',path:'/'},
                {title:'产品服务',path:'/Product'},
                {title:'关于我们',path:'/About_us'}
            ],
            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);
 }
},

active样式

    .active{color:#345AFA;}

免责声明:文章转载自《vuejs导航条动态切换active状态》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇c# winform动态生成控件与获取动态控件输入的值2.9 go mod 之本地仓库搭建下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

【Swift 2.1】为 UIView 添加点击事件和点击效果

前言   UIView 不像 UIButton 加了点击事件就会有点击效果,体验要差不少,这里分别通过自定义和扩展来实现类似 UIButton 的效果。 声明  欢迎转载,但请保留文章原始出处:)   博客园:http://www.cnblogs.com  农民伯伯: http://over140.cnblogs.com 正文   一、为 UIView 添...

为maven设置代理

如果服务器是通过代理上网的,可以通过一下方式设置避免服务器不能联网安装依赖问题 # more /usr/local/maven/conf/settings.xml <?xml version="1.0" encoding="UTF-8"?> <settings xmlns="http://maven.apache.org/SETTINGS...

Vue.js 源码分析(五) 基础篇 方法 methods属性详解

 methods中定义了Vue实例的方法,官网是这样介绍的: 例如:: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.bootcss.com/vue...

Vue-es6语法

一、Vue课程介绍 二、es6中的let和const声明变量 三、es6中的模板字符串 四、es6的箭头函数(函数的书写) 五、对象的单体模式 六、es6中的class的使用 七、前端三大框架比较 八、前端框架与库的区别 九、nodejs中npm的使用 一、Vue课程介绍 1)上来先不要搞Vue,因为前端知识太多,html+css+js(ECMAScri...

原生JS实现音乐播放器!

  前  言            最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能:        1、支持循环、随机播放   2、在播放的同时支持图片的旋转        3、支持点击进度条调整播放的位置,以及调整音量        4、显示音乐的播放时间        5、支持切歌:上一...

【转】WPF自定义控件与样式(8)-ComboBox与自定义多选控件MultComboBox

一.前言   申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等。   本文主要内容: 下拉选择控件ComboBox的自定义样式及扩展; 自定义多选控件MultiComboBox; 二.下拉选择控件ComboBox的自定义样式及扩展 2.1基本样式   先看看基础效果图:     从功能上ComboBo...