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

所以我有一个项目页面，当我点击一个项目时，我想进入该项目的项目详细信息页面。所以我使用动态路线。我将一个名称（将显示在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} }">

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

http://localhost:8080/project/myprojectName

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

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

---

我不确定您为什么要将

项目

绑定到

路由器链接

，这应该是不必要的

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

此外，如果您设置了

props:true

，您可以将组件与路由器解耦，而不是使用

this.$route.params.id

，您的细节组件将作为props接收参数

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

---

编辑：如果你想允许刷新并且仍然保留id，你必须在url中有id，或者你必须将它存储在像

localstorage

或

sessionstorage

这样的地方，实际上它可以工作，但我每次点击路由器都会得到idlocalhost:8080/project/myprojectName/0``实际上我找到了解决方案，不知道为什么，这很简单，我只需要``this.project.id``仍然不知道它是如何工作的，因为我正在重新分析组件内的页面，但组件本身已经知道该项目。谢谢你的帮助

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

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