How to use 404 page component to current url in Nuxt - vue.js

Question

In my nuxt project i have the following structure in my pages folder:
index.vue
tools
index.vue
_id.vue
page-not-found.vue
in my nuxt config i have this on router section:
router: {
extendRoutes(routes, resolve) {
routes.push(
{
name: '404',
path: '*',
component: resolve(__dirname, 'pages/page-not-found.vue')
},
)
},
}
when i land in url other than on my pages folder, i have the url and my 404 component showed (ex: my-domaine/other-path show 404 content). So that i want is with my route tools-id i want to fetch data depend on parameter id, if got data, i show the page with details, but if i got no data, i want to have the same behavior as my 404 route; like, in my url i have my-domaine/tools/parameter_value but my pages show the 404 content.

Answer 1

Take a look at the Nuxt documentation for error pages: https://nuxtjs.org/docs/concepts/views/#error-page.
You can create a layout file called error.vue which serves as a base for all error pages in your site. From that layout you can reference the appropriate error component. For example:
<template>
<div>
<NuxtLink to="/">Home page</NuxtLink>
<PageNotFound v-if="error.statusCode === 404" :message="error.message" />
</div>
</template>
<script>
export default {
props: ['error'],
layout: 'error'
}
</script>
Vue will automatically render the content of the error page on the invalid route. You can also programmatically open the error page by calling the context.error() method. For example:
asyncData ({ params, error }) {
return axios.get(`https://my-api/posts/${params.id}`)
.then((res) => {
return { title: res.data.title }
})
.catch((e) => {
error({ statusCode: 404, message: 'Post not found' })
})
}
If you're using the error function inside the asyncData or fetch methods, then you can access it like I showed in the answer above, otherwise in any other method defined in the Vue instance you can access it via this.error()
export default {
data: {...},
methods: {
validateRoute() {
if (404) {
this.error({statusCode: 404, message: "Page not found"})
}
},
axiosRequest() {
try {
const response = await axios.get('...');
return response;
} catch(err) {
this.error({statusCode: 404, message: err.message });
}
}
}
}