Unknown Dynamic Nested Routes in NuxtJS With Slug Parameter?

Question

I am still learning how to use NuxtJS and I saw in there documentation here: https://nuxtjs.org/guide/routing#unknown-dynamic-nested-routes that if you add a file in the pages folder named '_.vue' it is kind of a catch all if there isn't a path specified in the pages folder.

This works fine and well, but what I need to do now is be able to pass a parameter to that file. I am currently doing what I am trying to replicate in pages/_slug/index.vue, which is:

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

Since it is in the '_slug' folder I can pass params.slug to it and it works well. But I am now trying to have a catch all in the _.vue file, but not sure the best way to get the slug parameter in this file. I tried just adding that function into that file, but it did not work.

Is there a way to pass the slug parameter to the _.vue file in NuxtJS?

Dave Smart Dave Smart · Accepted Answer · 2019-02-28T11:06:41

Use 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
    })
},

Unknown Dynamic Nested Routes in NuxtJS With Slug Parameter?

1 Answers