如何在 Nuxt 的 asyncData 中重定向
Posted
技术标签:
【中文标题】如何在 Nuxt 的 asyncData 中重定向【英文标题】:How to redirect in Nuxt's asyncData 【发布时间】:2021-06-21 21:04:48 【问题描述】:我是 vue.js 的新手,我有一个简单的问题。
我有如下代码:
asyncData( params, error )
return Job.api()
.fetchByID(params.id)
.then((response) =>
const selectedJob = response.entities.jobs[0]
if (selectedJob)
const industryID = selectedJob.industryId
return Industry.api()
.fetchByID(industryID)
.then((result) =>
const jobInd = result.response.data
return
tagsArray:
selectedJob.tags === 'null' || selectedJob.tags === ''
? []
: selectedJob.tags.split(','),
job: selectedJob,
jobIndustry: jobInd,
)
.catch(() =>
error(
statusCode: 404,
message: 'Job Industry not found',
)
)
)
.catch(() =>
error(
statusCode: 404,
message: 'Job not found',
)
)
,
我想知道遇到错误 404 后如何将页面重定向到主页。
【问题讨论】:
【参考方案1】:asyncData()
的参数是Nuxt context,其中包括可用于重定向用户的redirect()
:
export default
asyncData( redirect, params, error )
return Job.api()
.fetchByID(params.id)
.then(/*...*/)
.catch(() =>
redirect('/')
)
【讨论】:
【参考方案2】:您可以像这样以编程方式将用户重定向到另一个页面:
this.$router.push( name: 'home' )
或
this.$router.push('/')
注意:使用名称的第一个示例比硬编码路径更好 示例:
.catch((error) =>
error(
statusCode: 404,
message: 'Job not found',
)
this.$router.push( name: 'home' )
)
【讨论】:
收到新错误,说在 asyncData 中出现了意外 redirect('/somePage') 检查此链接:nuxtjs.org/docs/2.x/internals-glossary/context以上是关于如何在 Nuxt 的 asyncData 中重定向的主要内容,如果未能解决你的问题,请参考以下文章