无法使用 Nuxt 和 Vuejs 找到正确的页面

Question

我正在做一个博客项目，完全静态，从 wordpress rest 获取数据 api。

我试图在点击索引文件上显示的标题时显示文章页面。

我需要根据 post 的鼻涕虫自定义路线。

但是我得到一个"This page could not be found"

路线改变事件信息：

结构

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 }) {
    // We can return a Promise instead of calling the callback
    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
  })
}

感谢您的帮助

Answer 1

我明白了。我试图检查字符串是否为 NaN。

已解决。

无法使用 Nuxt 和 Vuejs 找到正确的页面

Impossible to found the right page with Nuxt and Vuejs

javascript

vue.js

nuxt.js