Question

我对路由器链接有问题。当我将其放在视图中时，它可以很好地工作，我有一个可单击的链接。但是，当我在视图中内置的组件中放置路由器链接时，该路由器链接不再起作用：我希望“仅”链接到项目的详细信息。

这项工作（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>

这不起作用（resources/js/components/UserProject.vue）

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

页面脚本部分：

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

我的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
    }
];

我不知道我的错误在哪里：/

Answer 1

您的方法是错误的。 router-link是呈现a元素的组件。查看官方消息来源：https://router.vuejs.org/api/#router-link。第一个可行，但是两者都不对。您应该将tag='li'放在router-link中。第二个将永远无法工作，因为VueJS会丢弃h4标签。要使其正常工作，请替代以下内容：

<h4>
 <router-link :to='<your-params>'>{{ project.title }}</router-link>
</h4>

Answer 2

多亏了乔姆，问题在于我的“子弹”是空的，实际上，当我看着控制台时，警告就在那里了。

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

Answer 3

您可以在呈现路由器链接之前检查子弹不为空，例如以下示例：

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

但是我确定，为什么是空的。

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

3 个答案: