VueJS Router-link not linking to the view

Question

I have a problem with the router link. When I put it in a view, it works very well, I have a clickable link. But when I put a router link in a component, built into a view, then the router link no longer works: I would like "just" to link to the detail of a project.

This 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>

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>

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>

My router.js

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 don't understand where is my mistake :/

Can you post how you initialize the data on these Vue instances? — Yom T.
– Yom T., Commented Jan 18, 2019 at 3:21
Is UserProject a child component of HomepageView? We will actually need to see your router configs as well. — Yom T.
– Yom T., Commented Jan 18, 2019 at 3:32
UserProject is a child component of DashboardIndexView.vue . I have a view, called DashboardIndexView, and inside of it, i have a component "UserProject". I've added the route.js part — Christophe
– Christophe, Commented Jan 18, 2019 at 3:39

Duy Nguyen · Accepted Answer · 2019-01-18 04:10:58Z

1

You can check slug is not empty before render a router link, like below sample:

<router-link v-if="project.slug" to="{ name: 'projects.show', params: { slug: project.slug }}">
    <h4>{‌{ project.title}}</h4>
</router-link>

But I am sure, why slug is empty.

answered Jan 18, 2019 at 4:10

Duy Nguyen

1,0256 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Christophe · Accepted Answer · 2019-01-18 04:08:11Z

0

Thanks to Jom, the problem was that my "slug" was empty, and indeed when i look at the console, the warning was there.

[vue-router] missing param for named route "projects.show": Expected "slug" to be defined

answered Jan 18, 2019 at 4:08

Christophe

3991 gold badge6 silver badges23 bronze badges

1 Comment

AndrewShmig Over a year ago

You should accept his answer to help others find correct solutions to similar problems.

Collectives™ on Stack Overflow

VueJS Router-link not linking to the view

2 Answers 2

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Linked

Related