如何在 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 中重定向的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Nuxt Vue 应用程序中重定向

如何使用 Nuxt 访问 asyncData 中的数据

如何测试 nuxt.js asyncData 并获取钩子

如何在 Nuxt 的 asyncData 中对 Promise.all 进行数组解构

如何使用 Nuxt 和 asyncData 观察路由变化

在 Nuxt 中硬刷新时的 asyncData 钩子