如何 VueJS 路由器链接主动样式 [英] How to VueJS router-link active style
本文介绍了如何 VueJS 路由器链接主动样式的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我的页面目前有 Navigation.vue 组件.我想让每个导航悬停并处于活动状态.悬停"有效,但主动"无效.
这是 Navigation.vue 文件的样子:
<div><nav class="navbar navbar-expand-lg 固定顶行"><router-link tag="li" class="col" class-active="active" to="/" exact>TIME</router-link><router-link tag="li" class="col" class-active="active" to="/CNN"精确>CNN</router-link><router-link tag="li" class="col" class-active="active" to="/TechCrunch"精确>TechCrunch</router-link><router-link tag="li" class="col" class-active="active" to="/BBCSport" exact>BBC Sport</router-link></nav>
模板>
以下是样式.