Question

NuxtJS 中带有 Slug 参数的未知动态嵌套路由？

2019-02-03

1778

javascript vue.js vuejs2 vue-router nuxt.js

我仍在学习如何使用 NuxtJS，我在此处的文档中看到： https://nuxtjs.org/guide/routing#unknown-dynamic-nested-routes ，如果您在 pages 文件夹中添加一个名为“_.vue”的文件，如果 pages 文件夹中没有指定路径，它就会全部捕获。

这工作得很好，但我现在需要做的是能够将参数传递给该文件。我目前正在尝试在 pages/_slug/index.vue 中复制以下内容：

asyncData ({ params }) {
    return axios.get(`https://example.com/wp-json/wp/v2/pages?slug=${params.slug}`)
    .then((res) => {
      return {
        page: res.data[0]
      }
    })
    .catch(error => {
      console.log(error)
      this.errored = true
    })
  },

由于它位于“_slug”文件夹中，我可以将 params.slug 传递给它，并且它工作得很好。但是我现在想在 _.vue 文件中捕获所有内容，但不确定在这个文件中获取 slug 参数的最佳方法。我尝试将该函数添加到该文件中，但没有成功。

有没有办法将 slug 参数传递给 NuxtJS 中的 _.vue 文件？

Answer 1

使用 param.pathMatch:

asyncData ({ params }) {
  return axios.get(`https://example.com/wp-json/wp/v2/pages?slug=${params.pathMatch}`)
    .then((res) => {
      return {
        page: res.data[0]
      }
    })
    .catch(error => {
      console.log(error)
      this.errored = true
    })
},