0

Не получается реализовать навигацию на 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>

1 ответ 1

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;
}
6
  • Maxim, Спасибо за ответ, но у меня этот вариант не работает
    – Pavel
    11 апр в 7:34
  • 1
    @Pavel сейчас, попробовал поиграться с вашим кодом на codepen и заметил что в .active в font-size: 24px; не хватает, точки с запятой. и ещё .table__col background-color: red; может перекрывать бг router-link
    – Maxim
    11 апр в 7:46
  • 1
    @pavel, немного добавил в свой ответ изменённый css, так как у меня работает
    – Maxim
    11 апр в 7:49
  • еще раз спасибо) Но как можно сделать, чтобы в неактивном виде-кнопка оставалась, к примеру, красной?
    – Pavel
    11 апр в 7:54
  • 1
    @pavel Вы можете добавить на компонент router-link свой класс например: <router-link class="nav-link"></router-link> на класс nav-link прописать нужные для вас стили: .nav-link { background-color: red;} А кода ссылку будет становится активной, к ней будет добавятся класс активности. Например в вашем примере это active. И тогда вы можете прописать стили уже для этих классов в сочетании: например .nav-link.active{ background-color: green; }
    – Maxim
    11 апр в 8:00

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.