I'm currently in the process of developing a static blog project that fetches data from the WordPress REST API.
My objective is to showcase the article page upon clicking the title on the index file.
I require a customized route based on the post's slug.
However, I encounter a message stating "This page could not be found."
The event information for the changed route:
https://i.sstatic.net/EQYx5.png
Layout
pages
--| article
----| _slug.vue
--| index.vue
index.vue
<template>
<div class="container">
<h1>Blog</h1>
<ul>
<li v-for="article in posts" :key="article.id">
<nuxt-link :to="{ name: 'article-slug', params: {slug : article.slug} }">{{ article.title.rendered }}</nuxt-link>
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios'
export default {
asyncData({ req, params }) {
return axios.get('https://dev.lesdeuxvagues.com/api/wp-json/wp/v2/posts/')
.then((res) => {
return { posts: res.data.slice(0, 5) }
})
},
head: {
title: 'List of posts'
}
}
</script>
_slug.vue
<template>
<div>
<h1>
{{ title.rendered }}
</h1>
<template>
{{ content.rendered }}
</template>
<p><nuxt-link to="/">Back to home page</nuxt-link></p>
</div>
</template>
<script>
import axios from 'axios'
export default {
validate({ params }) {
return !isNaN(+params.slug)
console.log(params)
},
async asyncData({ params, error }) {
try {
const { data } = await axios.get(`https://dev.lesdeuxvagues.com/api/wp-json/wp/v2/posts/?slug=${+params.slug}`)
return data
} catch (e) {
error({ message: 'User not found', statusCode: 404 })
}
}
}
router.js
export function createRouter () {
return new Router({
mode: 'history',
base: '/',
linkActiveClass: 'nuxt-link-active',
linkExactActiveClass: 'nuxt-link-exact-active',
scrollBehavior,
routes: [
{
path: "/article/:slug?",
component: _540807ba,
name: "article-slug"
},
{
path: "/",
component: _ac3e7d78,
name: "index"
}
],
fallback: false
})
}
Thank you for lending your assistance.