Как можно при клике на таб переходить на нужную страницу? Проблему с моим кодом в то что url меняется но не переходит.
listTasks.vue
<template>
<div>
<ul class="nav nav-tabs">
<li class="nav-item" v-for="(item, index) in tabs" :key="index">
<a class="nav-link active" @click="$router.push( `${item.path}` )">{{item.name}}</a>
</li>
</ul>
<router-view></router-view>
</div>
</template>
<script>
export default {
data() {
return {
tabs: [
{
name: 'angular',
path: '/tasks/angular'
},
{
name: 'react',
path: '/tasks/react'
}
]
}
}
}
</script>
Angular.vue
<template>
<div>
<p>angular page</p>
</div>
</template>
<script>
export default {}
</script>
React.vue
<template>
<div>
<p>react page</p>
</div>
</template>
<script>
export default {}
</script>
router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import listTasks from '../views/Tasks/listTasks';
import Angular from '../views/Tasks/Angular';
import React from '../views/Tasks/React';
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/tasks',
name: 'tasks',
component: listTasks,
children: [
{
path: 'angular',
name: 'angular',
component: Angular
},
{
path: 'react',
name: 'react',
component: React
}
]
}
],
});
export default router;