如何在Nuxt的asyncData中重定向

Question

我是 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错误后如何将页面重定向到主页。

Answer 1

asyncData()

的参数是Nuxt上下文，其中包括可用于重定向用户的

redirect()

：

export default {
  asyncData({ redirect, params, error }) {
    return Job.api()
      .fetchByID(params.id)
      .then(/*...*/)
      .catch(() => {
        redirect('/')
      })
  }
}

Answer 2

 async asyncData({  params ,error , redirect }) {
 #
 #
 #
 #
 # any code you want 
 return redirect(301, "YourNewRoutePath")

}

Answer 3

您可以以编程方式将用户重定向到另一个页面，如下所示：

this.$router.push({ name: 'home' })

或

this.$router.push('/')

注意：使用名称的第一个示例比硬编码路径更好 示例：

.catch((error) => {
    error({
      statusCode: 404,
      message: 'Job not found',
    })
   this.$router.push({ name: 'home' })
  })