VUE，关于导航列表样式切换（VUE Router：router-link-active）

figofuture 发布于2019-08-29 12:24 / 1125人阅读

摘要：在自己入门学习的笔记中也有提及第一种中我们通常采用将当前选中的项目解除被选中的样式为选中的条目添加被选中的样式非常简便，需要，并在中配置。但学，还是用其本身的与绑定最好。第四种也是最官方，最简单的。

当我们新建一个网站时，总是要做一个导航列表，在传统的WEB开发中这已经是一种很成熟的技术，自己学VUE，看了官方文档，加上自己摸索，也学到不少，现在拿来分享一下。在自己VUE入门学习的笔记中也有提及
第一种：JQUERY中我们通常采用:
$("li[class="active"]").removeClass("active"); //将当前选中的项目解除被选中的样式；
$(selector).addClass("active");//为选中的条目添加被选中的样式；
非常简便，需要npm install jquery，并在baseConfig中配置。但学VUE，还是用其本身的Class 与 Style 绑定最好。
第二种：VUE中没有选择器，但对于CSS属性支持状态关联操作（Class 与 Style 绑定）：
eg：v-bind:class="{ active: isActive }"
解读：当isActive值为真时，active样式有效，Dom渲染结果是：class=“active”
当为false时，active样式无效，Dom渲染结果是：class=“”
因此我们可以利用这个属性做文章
标签HTML：

这条语句我们生成了一个列表，并为其绑定了一个选中事件，为class动态绑定了一个判断事件
同样我们在选择这个事件中：
function selected(seclctedName){
this.activeName= seclctedName;
}
数据属性：

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，比如：、

这是当切换到MyBlog时，他就会被选中，随便刷新，都没有方法二的情况出现。

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

然后

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

转载请注明本文地址：https://www.ucloud.cn/yun/111878.html

路由

摘要：由命名路由与子路由构成整体结构，我们用它构建如下页面。以下两张图说明路由和子路由是如何工作的。继续修改好友信息的路由部分添加好友信息为组件添加动态路由为动态路由添加为路径参数添加数据下发为组件添加，并使用它。不使用vue-router的情况代码官方给出下面的例子在不使用vue-router的情况下来实现一个路由。该示例结合了H5历史管理API、单文件组件、JS模块相关内容来实现路由...

Aklman 2019-08-22 16:09 评论0 收藏0
Vue.js-状态管理与Vuex

摘要：学习笔记状态管理与状态管理与非父子组件跨级组件和兄弟组件通信时，使用了中央事件总线的一个方法，用来触发和接收事件，进一步起到通信的作用。仓库包含了应用的数据状态和操作过程。新建文件，并写入的配置，会依赖此配置文件来使用编译代码。学习笔记：状态管理与Vuex 状态管理与Vuex 非父子组件（跨级组件和兄弟组件）通信时，使用了bus（中央事件总线）的一个方法，用来触发和接收事件，进一步...

lykops 2019-08-23 16:03 评论0 收藏0
VUE实例图解

摘要：案例品牌列表构建基本结构利用的样式数据要双向更新，所以要用到，同时在后面的中要进行初始化为添加按钮绑定事件的中，绑定值为关键字删除标签绑定函数，传入参数的时候，需要用括号事件修饰符，表示阻止默认事件实例对象新建一个实例函数中初始化需要双向 VUE案例品牌列表构建基本结构利用bootstrap的样式 showImg(https://segmentfault.com/img/bVbf...

wqj97 2019-08-23 11:27 评论0 收藏0
vue-router 一些容易被忽略的知识点

摘要：调用全局的守卫。在被激活的组件里调用。用创建好的实例调用守卫中传给的回调函数。本文适用于对 Vue.js 和 vue-router 有一定程度了解的开发者除特殊说明，vue-router 版本为 3.0.2 正文路由 class 匹配路由匹配后会给该标签添加 class 属性值 .router-link-active，该功能在嵌套路由中十分方便 class 的实际属性值可以通...

chunquedong 2019-08-23 14:58 评论0 收藏0
【Vue.js 牛刀小试】：第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

摘要：而路由则是使用了中新增的事件和事件。总结这一章主要是介绍了如何使用在中构建我们的前端路由。系列目录地址一、基础知识概览第一章 - 一些基础概念（posted at 2018-10-31）第二章 - 常见的指令的使用（posted at 2018-11-01）第三章 - 事件修饰符的使用（posted at 2018-11-02）第四章 - 页面元素样式的设定（posted a...

cpupro 2019-05-22 19:26 评论0 收藏0