Vue.js 带获取数据的Vue路由器

在router.push上使用params（而不是query）时，如何继续获取id作为参数

我认为我的例子不是最优的。我怎样才能做得更好

const Cities=Vue.component（'city'）{
模板：“{}}”，
创建（）{
提取（“”）
.then（（response）=>response.json（））
。然后（（结果）=>{
这个.$router.push（{path://:id”，参数：{}}）；
这就是结果
console.log（this.cities）
});
},
数据（）{
返回{
城市：{
姓名：“，
id:“
}
}
}
});
常量路由器=新的VueRouter({
路线：[
{
构成部分：城市，
路径：'/：id'
}
]
});
新Vue({
el:“#应用程序”
路由器

按id将数组转换为对象 我只想在这里显示城市名称。因此，如果您从请求中获得结果，我假设响应如下所示：

[
{
id:“9123102873”，
名称：“阿尔法”
},
{
id:“1928307239”，
名称：“三角洲”
}
]

一个选项是从数组中创建一个映射，如

提取（“”）
.then（（response）=>response.json（））
。然后（（结果）=>{
const cityMap={}；
结果.地图（（城市）=>{
cityMap[city.id]=城市；
});
this.cities=城市地图；
});

看来

{
"9123102873" : {
id:“9123102873”，
名称：“阿尔法”
},
"9123102873" : {
id:“1928307239”，
名称：“三角洲”
}
}

现在，您可以按id渲染城市，如

<h1> {{ cities[$route.params.id].name }} </h1>

{{cities[$route.params.id].name}

仔细的

---

当您在

$router.push

中使用params时，您可以稍后使用

this.$route.params.id

访问组件中的那些params。我不确定您是否是这个意思，所以现在只需进行注释。感谢您的注释。我将要从每个对象中提取并使用“id”作为参数和“name”要在pageWell上进行渲染，您不能依赖cities[1]，因为在获取解决之前不会加载cities。Vue会抱怨未定义的属性错误。首先，您应该检查cities是否已设置，然后迭代每个city:

{{city.name}

，另外，您在数据函数中定义的是不匹配，它应该是一个城市的空数组，而不是一个id和名称为的对象。您不想迭代模板中的所有城市，对吗？您只想显示一个特定的城市？是的，所以我想显示{{name}与参数id匹配的城市的。它们应该来自同一个对象。因此id和城市名称将匹配