Как сделать навигацию в vue, чтобы активная кнопка меняла цвет?

Рейтинг: 0Ответов: 1Опубликовано: 11.04.2023

Не получается реализовать навигацию на vueJS. Я хочу, чтобы активная кнопка была другого фона, но у меня что то не получается.Во встроенном редакторе выходит ошибка, поэтому пример своего кода я выложил на codepen:

https://codepen.io/pavelpavlov1988/pen/JjmdxXP


console.clear()

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const Home = { template: '<div>Home</div>' }


const routes = [
  {path: '/', component: Home},
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({
  routes,
  linkExactActiveClass: "active"
})
//
new Vue({
  router, 
  el: "#app"
})
.active {
 font-size: 24px
  background-color: green; 
}
.table__col {
 display:flex;
 background-color: red;
    }
 .panel__table {
  display: flex;
  width: 50%;
  padding: 0;
  margin-bottom: 40px;
  justify-content: space-between;
  list-style: none;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
   <ul class="panel__table">
  <router-link to="/"><li class="table__col">Home</li></router-link>
  <router-link to="foo"><li class="table__col">Foo</li></router-link>
  <router-link to="bar"><li class="table__col">Bar</li></router-link>
  </ul>
  <hr>
  <router-view></router-view>
     
</div>

vue.js
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Активный router-link получает css классы router-link-active router-link-exact-active. Так что если нужно изменить им стили, то можно прописать на эти классы.

У меня например так

    .router-link-active {
        background-color:#0d6efd!important;
        color: white !important;
    }

Исправление из codepen:

.active {
 font-size: 24px;
  background-color: green; 
}
.table__col {
 display:flex;
}
 .panel__table {
  display: flex;
  width: 50%;
  padding: 0;
  margin-bottom: 40px;
  justify-content: space-between;
  list-style: none;
}