VUE—linkActiveClass 动态配置active class

VUE—linkActiveClass 动态配置active class,第1张

一.在点击导航栏的时候,让被点击的那一个有背景色,其他的没有背景色?

这样<router-link>被点击激活的时候就会被加上is-active这个class了。注意如果没有设置router-link的标签类型,会是<a>标签,<a>标签是没有宽度和高度的。将router-link 这样的a标签转化为li标签

二.自己来 *** 控 active Class 给加的位置,并不想它随着路由的改变而改变

假如侧边栏我的钱包,路由为'/myWallet',在'/myWallet'页面可以 *** 作提现,会进入'/withdraw'提现页面,路由发生变化,从'/myWallet' 身上移到'/withdraw'上了。如何让 '/myWallet' 这个页面的active Class 保留住呢?给'/withdraw' 加上一个路由元信息,在侧边栏去检查路由元信息,然后看是否需要给其active class

如果只有一个页面 对应一个active的,就不用添加 meta下面的active属性了

active-class是vue-router模块的router-link组件中的属性,用来做选中样式的切换;

a.直接在路由js文件中配置linkActiveClass

b.在router-link中写入active-class

a.直接在路由js文件中配置linkActiveClass

b.在router-link中写入exact


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/11879682.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-19
下一篇2023-05-19

发表评论

登录后才能评论

评论列表(0条)

    保存