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

Question

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

我知道我们可以 <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

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

Answer 2

更新：如我的所示，如果您希望在使用 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 and here。

如果你想在抓取后进行客户端重定向，你总是可以有一个

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

在 catch.

之后

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

How to create 404 page on dynamic routes Nuxt js Fetch method

nuxt.js