Nuxt Dynamic routes returns 404 after static generation

Question

guys. I have a shop page with two params: page and sort. like below:

example.com/shop/
example.com/shop/page/2/
example.com/shop/sort/newest/
example.com/shop/sort/oldest/page/2/

this is my route configs:

router: {
    extendRoutes(routes, resolve) {
      routes.push(
        {
          path: '/shop/sort/:sort/page/:page(\\d+)',
          component: resolve(__dirname, 'pages/shop/index.vue'),
          name: 'shop-sort-page',
        },
        {
          path: '/shop/sort/:sort',
          component: resolve(__dirname, 'pages/shop/index.vue'),
          name: 'shop-sort',
        },
        {
          path: '/shop/page/:page(\\d+)',
          component: resolve(__dirname, 'pages/shop/index.vue'),
          name: 'shop-page',
        },
      )
    }
},

Now, after i generate my website, Nuxt doesn't generate sort pages. when i go to /sort/ or /sort/oldest/page/2/ it returns 404.

what do I need to do? if I need to generate all these pages by myself, then what are these routes.push() used for?

I also want to add "name" and "filter" params. you see generating a dynamic route for all these parameters is impossible. what can I do? thanks.

score 0 · Answer 1 · answered Nov 18 '22 at 10:31

Im using Nuxt 2, by official doc, you need to add route for each parameter https://nuxtjs.org/docs/configuration-glossary/configuration-generate/#routes

For workaround solution, I may create a redirect page for dynamic page and url is

example.com/shop/redirect?page=2&sort=newest

In redirect page:

 mounted(){
        const p_page= this.$route.query.page
        const p_sort  = this.$route.query.sort
        this.$router.push(`/shop/sort/${p_sort}/page/${p_page}`)
    }

Nuxt Dynamic routes returns 404 after static generation

1 Answers1