如何使用 .htaccess 的 404 页面回退在 Nuxt 路由器中手动生成页面

import axios from 'axios'

export default {
  ...
  generate: {
    routes: async () => {
      const users = await axios.get('https://jsonplaceholder.typicode.com/users')
      return users.data.map((user) => ({
        route: `/users/${user.id}`,
        payload: user,
      }))
    },
    fallback: 'no-user.html', // this one is not needed anymore if you ditch the redirect!
  },
}

这将生成所有需要的路由，同时由于 payload 将调用保持在最低限度，稍后将传递到页面。可以在 the docs.

中找到更多信息

然后，创建 /pages/users/_id.vue 页面就可以了

<template>
  <div>
    <div v-if="user">User name: {{ user.name }}</div>
    <div v-else-if="error">{{ error }}</div>
  </div>
</template>

<script>
export default {
  asyncData({ payload }) {
    if (payload && Object.entries(payload).length) return { user: payload }
    else return { error: 'This user does not exist' } // this will also catch users going to `/users/`
  },
}
</script>

创建一些 no-user.vue 页面，error.vue 布局，你应该是 gucci

最后，我们有 10 个来自模拟 API 的用户。所以这些是以下情况：

如果我们转到 /users/5，用户已经是静态的，所以我们确实有它的信息，不需要任何额外的 API 调用
如果我们转到 /users/11，构建时用户不在场，因此他不在这里，我们显示错误
如果我们转到/users，我们仍然会被发送到/pages/users/_id页面，但是由于:id在那里是可选的，它会出错并仍然显示错误，一个 index.vue 当然可以处理这种情况

我的 github 存储库可以在这里找到：https://github.com/kissu/so-nuxt-generate-placeholder-users

Answer 2

这是一个棘手的方法，但我找到了我想要的代码。

https://fes.d3v-svr.com/users/xxxxxx 是我期待的作品。

用户 xxxxxx 不存在
显示404页面
原样URL/users/xxxxxx

首先，只需设置.htaccess 将不存在的页面重写为404页面

ErrorDocument 404 /no-user/index.html

仅在上面，Nuxt 执行基于 URL /users/xxxxxx/ 并将页面重新呈现为“UserXXXXXX”，即使他不存在。

为了避免这种情况，users/_id.vue 如下所示。

模板

<template>
  <div v-if="ssr">User name: {{ user.name }}</div>
</template>

脚本

<script>
export default {
  asyncData({ payload }) {
    return { user: payload, ssr:true }
  },
}
</script>

好像是如果模板为空，nuxt不会执行脚本依赖URL.

这非常棘手，所以我将继续介绍它的工作原理。

如何使用 .htaccess 的 404 页面回退在 Nuxt 路由器中手动生成页面

How to manually generate pages in Nuxt router with a 404 page fallback for .htaccess

apache

.htaccess

vue.js

nuxt.js

模板

脚本