Vue.js 使用nuxt.js动态路由传递参数

在动态路由中接收到一个参数后，我将查询数据库以返回结果，并发现控制台报告了一个错误

TypeError:无法读取null的属性“title”

当我去查看请求时，我发现第一个请求返回了数据，然后发送了相同的请求，但拼接参数为

null

，并报告了错误

这是第二个请求304

这是我的页面代码。 `

{{问题.标题}

{{labes（index）}}
{{timeago（problem.createtime）}

导入“~/assets/css/page sj qa detail.css”；
从“axios”导入axios；
从“@/api/problem”导入problemApi；
从“@/api/reply”导入replyApi；
从“@/api/label”导入labelApi；
导出默认值{
asyncData（{params}）{
返回轴
.全部([
problemApi.findById（参数id），
replyApi.findByProId（参数id），
problemApi.findPL（参数id）
])
.那么(
扩展（函数（pojo、replyList、labelList）{
返回{
problemId:params.id，
replyList:replyList.data.data，
问题：pojo.data.data，
labelList:labelList.data.data
};
})
);
},
数据（）{
返回{
CurrentreplyId:“”，
评论列表：[]，
标签名称：[]，
文本区域：“”，
dialogVisible:false，
内容：“，
编辑选项：{
//一些鹅毛笔选项
模块：{
工具栏：[
[{size:[“小”，假，“大”]}，
[“粗体”、“斜体”]，
[{list:“ordered”}，{list:“bullet”}]，
[“链接”，“图像”]，
[“块引号”，“代码块”]
]
}
}
};
},
安装的（）{
log（“appinit，我的quill insrance对象是：”，this.myQuillEditor）；
},
方法：{
标签（索引）{
console.log（this.labelList）；
labelApi.findOne（this.labelList[index].labelid）。然后（res=>{
this.labelName.push（res.data.data.labelName）；
console.log（this.labelName）；
});
},
支票（id）{
console.log（id）；
replyApi.findByParentid.then（res=>{
this.commentList=res.data.data；
});
},
显示（项目）{
console.log（item.id）；
如果（item.content==null | | | item.content===“”| | item.content==“”）{
返回false；
}否则{
返回true；
}
}

`

此页是从上一页动态路由的

---

{{item.title}

好的。我认为这很有帮助。如果我理解正确，您可以执行以下操作：

你在上一页

单击路由中具有项目id的nuxt链接

新路由加载后，您会收到一个错误：因为您的页面从API获取了两次数据（但您没有重新加载页面），对吗

如果是这样，我不确定为什么会执行两次

asyncData

，但您可能可以这样解决：

asyncData({ params }) {
if (params.id) {
    return axios
  .all([...
}

这将确保您的请求仅在存在ID时发出，并且不会发送null

老实说，我不知道为什么这个请求会被拒绝

我也不太理解你的API是什么样子的。我看到它以某种方式返回承诺，并且你可以对它调用方法……在这样的上下文中我没有看到过，但是OK:）

此外，您似乎在方法中执行更多的API调用。 也许这就是问题所在：

{{labes（index）}}

我看不出会传递给此方法的内容。此索引未定义。。。 然后打电话给

labes（）

（您是指

labels

？）方法，您执行

labelApi.findOne（this.labelList[index].labelid）

但由于索引未定义，我认为

this.labelList[index]

不会返回有用的内容，您会在那里发出请求吗

（取决于您的

api.findOne（）

方法的功能。它本身是否会向实际的远程api发送请求？）

---

干杯

你能分享一些你的代码吗？这会让我们更容易帮助你。所以问题不在于你的请求，而在于查询参数（我假设你有产品id或类似的东西（第一次是

2

）是不存在的。无论如何，你提出了一个请求…所以你必须找出你的代码中发生了什么，为什么它会变为null并提出这样的请求…？但是正如我所说的，在你提出这些请求的地方共享一些代码，也许我可以看到更多。非常感谢你帮助我这个新手。我已经发布了一些代码。如果你写得好，请e原谅我。非常感谢你的回答。我根据你的回答发现了问题。我发现第二个请求是因为导入标题的页面有一个未加载的img，因此每个请求都可能刷新页面，但没有参数。传入，因此存在空值问题。好的。

asyncData({ params }) {
if (params.id) {
    return axios
  .all([...
}