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