I am facing an issue with the router link. When I use it in a view, it works perfectly fine as I have a clickable link. However, when I include a router link in a component nested within a view, the router link stops working - all I want is to link to the details of a project.
This is how it looks in my work (
resources/js/views/HomepageView.vue <router-link :to="{ name: 'projects.show', params: { slug: slideshowProject.slug }}">
<a href="#" class="btn-secondary">See
Campaign</a>
</router-link>
But this doesn't work (
resources/js/components/UserProject.vue<router-link :to="{ name: 'projects.show', params: { slug: project.slug }}">
<h4>{{ project.title}}</h4>
</router-link>
Here's the script part of the page :
<script>
export default {
name: "user-projects",
data() {
return {
projects: null
}
},
mounted() {
this.getUserProject()
},
methods: {
getUserProject() {
this.$store.dispatch('getUserProjects', {
limit: 2
}).then(response => {
this.projects = response.data.data;
})
}
},
}
</script>
This is from my router.js file
import Homepage from '../views/frontend/HomepageView';
import ProjectDetails from '../views/frontend/ProjectDetailsView';
import LoginView from '../views/frontend/LoginView';
import RegisterView from '../views/frontend/RegisterView';
import DashboardIndexView from '../views/dashboard/DashboardIndexView';
export const routes = [
{
path: '',
name: 'homepage',
component: Homepage
},
{
path: '/login',
name: 'frontend-login',
component: LoginView
},
{
path: '/projects/:slug',
name: 'projects.show',
component: ProjectDetails
},
{
path: '/register',
name: 'frontend-register',
component: RegisterView
},
{
path: '/dashboard',
name: 'dashboard-index',
component: DashboardIndexView
}
];
I'm unsure where I may be going wrong :/