Below is a snippet of my route code from app.js
let routes = [{
path: "/dashboard",
component: require("./components/Dashboard.vue")
},
{
path: "/tour",
component: require("./components/Index.vue"),
children: [{
name: 'create',
path: '/create',
component: require('./components/product/Create.vue')
}]
},
{
path: "*",
component: require("./components/NotFound.vue")
}
];Master.blade.php
<div class="sidebar">
<router-link class="btn btn-success" to="/dashboard">
Dashboard
</router-link>
<router-link class="btn btn-success" to="/tour">
Tour
</router-link>
</div>
<div class="content">
<router-view></router-view>
</div>Index.vue
<template>
<div class="container">
<div class="row mt-5">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">Tours</h3>
<div class="card-tools">
<router-link class="btn btn-success" to="/tour/create">
Add New
<i class="fas fa-plus fa-fw"></i>
</router-link>
</div>
</div>
<!-- /.card-header -->
<div class="card-body table-responsive p-0">
<table class="table table-hover text-center">
<tbody>
<tr>
<th>ID</th>
<th>Name</th>
<th>Days</th>
<th>Price</th>
<th>Type</th>
<th>Image</th>
<th>Meta Title</th>
<th>Meta Description</th>
<th>Actions</th>
</tr>
<tr v-for="tour in tours.data" :key="tour.id">
<td>{{tour.id}}</td>
<td>{{tour.title}}</td>
<td>{{tour.days}}</td>
<td>{{tour.price}}</td>
<td>{{tour.category_id}}</td>
<td>
<i class="fas fa-check text-success" v-if="tour.image"></i>
<i class="fas fa-times text-danger" v-else></i>
</td>
<td>
<i class="fas fa-check text-success" v-if="tour.meta_title"></i>
<i class="fas fa-times text-danger" v-else></i>
</td>
<td>
<i class="fas fa-check text-success" v-if="tour.meta_description"></i>
<i class="fas fa-times text-danger" v-else></i>
</td>
<td>
<button @click="editModal(tour)" class="btn btn-primary btn-sm">Edit</button>
<button
@click="deleteUser(tour.id)"
class="btn btn-danger btn-sm"
>Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- /.card-body -->
<div class="card-footer"></div>
</div>
<!-- /.card -->
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tours: ""
};
},
methods: {
initialLoad() {
axios.get("api/tour").then(({
data
}) => (this.tours = data));
}
},
created() {
this.initialLoad();
}
};
</script>Index.vue displays all the saved tours from the database.
The Add New button within Index.vue loads the Create.vue component for creating tours. However, clicking on the create button leads to the NotFound.vue component from the wildcard route. No error messages are displayed either in the UI or console.
I've also tried:
import create from './components/product/Create.vue';and replacing
require('./components/product/Create.vue')create
But no progress has been made. Can anyone identify what mistake I might be making here?