Nuxt.js: Multiple dynamic

[EmmanuelBeziat]

Hi,
Sorry it’s me again!

Considering the changes in the generate routes configuration, I’m stuck because I have more than one dynamic routes to use.

I was using this, and I don’t see how to "translate" it to the new way:

routeParams: {
    '/blog/:slug': function () {
        return axios.get('https://rest.emmanuelbeziat.com/posts')
        .then((response) => {
            return response.data.map((post) => {
                return { slug: post.slug }
            })
        })
    },
    '/portfolio/:slug': function () {
        return axios.get('https://rest.emmanuelbeziat.com/portfolio')
        .then((response) => {
            return response.data.map((portfolio) => {
                return { slug: portfolio.slug }
            })
        })
    }
}

As the docs suggest to have a return, I don’t know how to pass it multiple routes. I took a look at the docs’s source, but it seems it’s still using the previous version.

Sorry, this one is totally a lack of JS knowledge on my side…

Thanks for your help.

_{This question is available on Nuxt.js community (#c383)}

[ausir0726]

hi @EmmanuelBeziat meet you again

I just tested nuxt 0.10.0 route generate and i18n language folder path .
It's look working perfect . 👍 👍 👍

this is my test for generate , with 2 kind of dynamic page
http://tasteful-cars.surge.sh/

and this is my test code on github.
https://github.com/ausir0726/nuxt-route-with-params

but just can only provide you a Chinese example @@
hope it can help you .

for your question , you can see nuxt.config.js .
async/await will easier handle call back and promise
because you should have muti route and muti pages from api .

generate: {
    async routes() {
      const { data: category_cis } = await axios.get('apiurl.json');
      const { data: category_website } = await axios.get('apiurl.json');
      const post1Page = category_cis.results.map((post) => { return `/post1/${post.slug}`; });
      const post2Page = category_website.results.map((post) => { return `/post2/${post.slug}`; });
      return [...post1Page,...post2Page];
    }
  },

[alexchopin]

@EmmanuelBeziat, this should work in your case:

generate: {
    async routes() {
      const blogs = await axios.get('https://rest.emmanuelbeziat.com/posts');
      const portfolios = await axios.get('https://rest.emmanuelbeziat.com/portfolio');
      const b_slugs = blogs.data.map(post => `/blog/${post.slug}`);
      const p_slugs = portfolios.data.map(portfolio =>`/portfolio/${portfolio.slug}`);
      return [...b_slugs,...p_slugs];
    }
  },

[EmmanuelBeziat]

Thanks to both of you!

[ausir0726]

just a note for someone search problem landing this page.

note
use async/await or arrow function you need compatible node.js version .

async/await >= 7.6

https://github.com/ausir0726/nuxt-route-with-params/issues/1

[EmmanuelBeziat]

@ausir0726 Excellent! Thanks

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.