Mi forma de manejar este tipo de problema y minimizar las llamadas a la API requeridas es seguir esos pasos:

• generar un nuevo proyecto Nuxt
• instalar axios: yarn add -D axios
• agregue esto al archivo nuxt.config.js

 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! }, }

Esto generará todas las rutas necesarias, manteniendo las llamadas al mínimo gracias a la payload que se pasará más tarde a las páginas. Se puede encontrar más información en los documentos .

• luego, crear la página /pages/users/_id.vue hace el truco

 <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>

• cree una página no-user.vue , diseño de error.vue y debería ser gucci

Al final, tenemos 10 usuarios de la API simulada. Así que esos son los siguientes casos:

• si vamos a /users/5 , el usuario ya está estático, por lo que tenemos su información sin ninguna llamada API adicional
• si vamos a /users/11 , el usuario no estaba presente en el momento de la compilación, por lo que no está aquí y estamos mostrando un error
• si vamos a /users , aún se nos enviará a la /pages/users/_id , pero dado que :id será opcional allí, generará un error y aún mostrará el error, un index.vue por supuesto puede manejar esto caso

Mi repositorio de github para este se puede encontrar aquí: https://github.com/kissu/so-nuxt-generate-placeholder-users

Es una forma complicada, pero he encontrado el código que funciona como quiero.

https://fes.d3v-svr.com/users/xxxxxx Es lo que espero.

• El usuario xxxxxx no existe
• Mostrar página 404
• La URL /usuarios/xxxxxx tal como es

Primero, simplemente configure .htaccess para reescribir la página que no existe en la página 404

 ErrorDocument 404 /no-user/index.html

Solo arriba, Nuxt ejecuta la base en la URL /users/xxxxxx/ y vuelve a mostrar la página como "UserXXXXXX", incluso si no existe.

Para evitar esto, users/_id.vue es como a continuación.

modelo

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

guion

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

Parece ser que si una plantilla está vacía, nuxt no ejecutará el script dependiendo de la URL.

Es muy complicado, así que continuaré explicando cómo funciona.