Javascript VueJS路由器链接未链接到视图

我的路由器链接有问题。当我把它放在一个视图中，它工作得很好，我有一个可点击的链接。但是，当我将路由器链接放入内置于视图中的组件中时，路由器链接将不再工作：我希望“只是”链接到项目的细节

这项工作（

resources/js/views/HomepageView.vue

）

页面的脚本部分：

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

---

我不明白我的错误在哪里：/

多亏了Jom，问题是我的“slug”是空的，事实上，当我看控制台时，警告就在那里

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

---

在渲染路由器链接之前，可以检查slug是否为非空，如以下示例所示：

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

{‌{project.title}

---

但是我可以肯定，为什么slug是空的。

您能发布一下如何初始化这些Vue实例上的数据吗？当然！我刚刚编辑了我的帖子：）是

UserProject

主页视图的子组件吗？我们实际上还需要查看路由器的配置。UserProject是DashboardIndexView.vue的子组件。我有一个视图，叫做DashboardIndexView，在它里面有一个组件“UserProject”。我已经添加了route.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
    }
];

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

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