Question

所以我有一个项目页面，当我单击一个项目时，我想转到该项目的“项目详细信息”页面。所以我在用动态路线。我将名称（将显示在URL上）和ID（用于访问商店并获得项目的ID）作为参数传递，该ID未显示在URL上。一切正常，问题是当我在项目的“详细信息”页面中加载浏览器时，我仅获得名称作为参数，而无法获得Id，因此由于没有Id，我无法将其与vuex匹配。

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

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

这就是我在其他页面上执行的操作，以将我的项目ID放入Vuex

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

我不确定为什么没有必要将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，您的detail组件将以props的形式接收参数。

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

编辑：如果要允许刷新并仍然保留该ID，则必须在URL中包含ID，或者必须将其存储在localstorage或sessionstorage之类的地方。

Vue路由器上的可选参数

1 个答案: