#css #vue.js #vue-router #routerlink
#css #vue.js #vue-маршрутизатор #routerlink
Вопрос:
На моей боковой панели есть некоторые <router-link>
, и я хочу, чтобы их стиль отличался, когда они активны. Я использую router active-class
для <router-link>
, но другие элементы внутри router-link не принимают некоторые свойства css. Вот мой <router-link>
внешний вид;
<router-link tag="li" to="/dashboard" class="nav-item has-treeview" active-class="active">
<a class="nav-link" id="dashboard_tab">
<i class="sidebar-icons">dashboard</i>
<p class="sidebar-links" active-class="active-p">Dashboard</p>
</a>
</router-link>
И вот мой .active
класс;
.active {
background-color: #FF7400;
border-color: #FF7400;
border-radius: 4px;
color: white;
}
Теперь, когда определенная ссылка нажата и активна, у меня есть оранжевый фон и некоторая граница вокруг этой ссылки маршрутизатора. Но моя проблема в том, что я также хочу, чтобы цвет элемента icon
и p
элемента был белым, но на них не влияет color: white;
свойство. Чего мне не хватает? active-class
работает только для router-link
элемента, поэтому я не могу использовать его в i
or p
. Что мне делать?
Комментарии:
1. Попробуйте
.active a { color: white }
2. О, вы правы, я этого не пробовал. Спасибо за поддержку!
3. Нет необходимости использовать
a
тег внутриrouter-link