• 上一篇: '@/'路径和'./'路径是什么意思 下一篇:mpvue小程序转H5

data(){
    return{
        tagNames:[
            {name:'hello',tabLink:'/Hello'},
            {name:'Login',tabLink:'/LOGin'},
            {name:'Myblog',tabLink:'/MyBlog'}
        ],
        activeName:'hello' //当activeName初始值为空时，浏览器加载时默认没有选择的列表项，当为hello时，hello列表默认被选中
    }
},

初看运行起来还可以，切换也正常，但当我们停留在非HELLO页面时，刷新页面，hello被选中了，而刷新前的选中样式被解除了，这是因为我们为activeName:'hello' 赋了初值。所以有BUG。
第三种：思路同二，但activeName,我新建导航样式列表组件时，我为其定义了一个TITLE属性
PRops: {

  title: {
      tyPE: String,
       default: 'any'
        }
  }

并在列表中使用:class="{active:title== tabbarName.name}来绑定active CSS，
当其他页面调用这个组件时，指定TITLE，比如： 、
<v-header title="MyBlog">
</v-header>
这是当切换到MyBlog时，他就会被选中，随便刷新，都没有方法二的情况出现。

第四种：也是最官方，最简单的。自己当时看VUEROUTER，因为看着面熟，看的比较快，所以错过了这个知识点，开始页的最下面有这样一句话：当 <router-link> 对应的路由匹配成功，将自动设置 class 属性值 .router-link-active，所以你只需要在自己的STYLE文件中，写了.router-link-active的样式，列表选中后，系统就会自动去绑定这个样式。此处应该有很多个锤头掩面的表情*。

然后

脚本宝典总结

以上是脚本宝典为你收集整理的VUE，关于导航列表样式切换（VUE Router：router-link-active）全部内容，希望文章能够帮你解决VUE，关于导航列表样式切换（VUE Router：router-link-active）所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。