vue.js - Vue路由器上的可选参数

Question

所以我有一个项目页面，当我点击一个项目时，我想转到该项目的项目详细信息页面。所以我正在使用动态路线。我作为参数传递了一个名称(将显示在 URL 上)和 Id(我用来去我的商店并获取项目，这个 Id 没有显示在 URL 上)。一切正常，问题是当我在项目详细信息页面中加载浏览器时，我只获取名称作为参数并且我无法获取 Id，因此我无法将 Id 与我的 vuex 匹配，因为没有 Id。

这是我在父级上的路由器链接

<router-link class="project__icon" :project="project" :to="{ name: 'projectDetail', params: {name: project.name.replace(' ', ''), id: project.id} }">

这就是我在其他页面上所做的以在 Vuex 中获取我的项目 ID

const projectId = this.$route.params.id; 
    this.project = this.$store.getters.getProject(projectId);

这是我点击路由器时得到的

http://localhost:8080/project/myprojectName

在我的路由器文件上我有这个

{
 path: '/project/:name',
 name: 'projectDetail',
 component: ProjectDetail,
},

Answer 1

我不知道你为什么要绑定(bind) project到router-link ，应该没有必要。

<router-link class="project__icon" :to="{ name: 'projectDetail', params: {name: project.name.replace(' ', ''), id: project.id} }">

您需要添加 :id作为您路线的参数。您可以使用 ? 将其标记为可选.

{
 path: '/project/:name/:id?',
 name: 'projectDetail',
 component: ProjectDetail,
}

此外，如果您设置 props: true您可以将组件与路由器分离，而不是使用 this.$route.params.id ，您的详细信息组件将接收参数作为 Prop 。

{
 path: '/project/:name/:id?',
 name: 'projectDetail',
 component: ProjectDetail,
 props: true,
}

编辑:如果您想允许刷新并仍然保留 id，则必须在 url 中有 id，或者您必须将其存储在 localstorage 之类的地方或 sessionstorage .