如何在动态路由 Nuxt js Fetch 方法上创建 404 页面

Question

我有动态路由http://localhost:3000/sections/slug-name。如果 URL 无效，我想显示或重定向到 404 页面。尝试使用 fetch 方法做类似this 的事情。

我知道我们可以做到 <p v-if="$fetchState.error">404 Invalid Section</p>，但有没有更好的方法来显示 404 页面。

以下是我的代码供您参考

<script>
export default {
  data() {
    return {
      posts: {},
      loader: false,
    }
  },
  head() {
    return {
      title: this.posts.category_name ,

    }
  },
 

  methods: {
    getResults(page = 1) {
      if (this.$route.query.page != page) {
        this.$router.push({
          query: {
            page: page,
          },
        })
      }
    },

    loadPosts(page) {
      this.loader = true
      this.$axios
        .$get(`category/${this.$route.params.category}?page=${page}`)
        .then((response) => {
          this.posts = response
          this.loader = false
        })
    },
  },
  watch: {
    $route(to, from) {
      this.loadPosts(to.query.page)
    },
  },
  async fetch() {
    let page = this.$route.query.page ? this.$route.query.page : 1
    this.posts = await this.$axios
      .$get(`category/${this.$route.params.category}?page=${page}`)
      .catch((e) => {
        this.$router.push({ name: 'fallback-page' })
      })
  },
}
</script>

Answer 1

更新：如我的answer here 所示，如果您在使用fetch() 钩子时想要相同的行为，可以使用它

this.$nuxt.context.error({
  status: 500,
  message: 'Something bad happened',
})

---

由于您使用的是 SSR，因此下面的部分大多是错误的。

如果您没有特定路径的路线，您可以设置这个

nuxt.config.js

export default {
  generate: {
    fallback: '404.html',
  },
}

并创建一个/layouts/error.vue 文件

<template>
  <p>some error here {{ error }}</p>
</template>

<script>
export default {
  props: ['error'],
}
</script>

以这种方式，如果您到达/hello-word 而它在您的路线中不存在，您将回退到这个。

正如here 和here 所解释的那样。

---

如果您希望在获取后进行客户端重定向，您总是可以有一个

.catch((e) => {  this.$router.push({ name: 'fallback-page' })  })

在catch 之后。

Answer 2

您必须在 catch 的 fetch 或 asyncData 方法中使用 error({ statusCode: 404}) 将客户端重定向到 404 页面