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 实例上的数据吗? 当然!我刚刚编辑了我的帖子:)UserProject
是HomepageView
的子组件吗?我们实际上还需要查看您的路由器配置。
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'