VueJS Router-link 未链接到视图

Posted

技术标签:

【中文标题】VueJS Router-link 未链接到视图【英文标题】:VueJS Router-link not linking to the view 【发布时间】:2019-06-12 07:40:45 【问题描述】:

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

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

我的路由器.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 实例上的数据吗? 当然!我刚刚编辑了我的帖子:) UserProjectHomepageView 的子组件吗?我们实际上还需要查看您的路由器配置。 UserProject 是 DashboardIndexView.vue 的子组件。我有一个名为 DashboardIndexView 的视图,在其中,我有一个组件“UserProject”。我添加了 route.js 部分 This post 可能会对您有所帮助。 【参考方案1】:

感谢 Jom,问题是我的“slug”是空的,当我查看控制台时,确实有警告。

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

【讨论】:

您应该接受他的回答,以帮助其他人找到解决类似问题的正确方法。【参考方案2】:

您可以在渲染路由器链接之前检查 slug 是否为空,如下示例:

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

但我很确定,为什么 slug 是空的。

【讨论】:

以上是关于VueJS Router-link 未链接到视图的主要内容,如果未能解决你的问题,请参考以下文章

VueJS 2 vue-router 2 (laravel 5.3)

在 vuejs 2.5 的路由器链接中设置目标 = '_blank'

使用“v-on:”指令向 <router-link> 组件添加事件监听器 - VueJS

如何在 Vuejs 中制作选项卡菜单特定链接

将道具(数组)传递到路由器链接路径

如何禁用 vuejs 路由器链接?