vue.js 静态生成后,Nuxt动态路由返回404

dced5bon  于 2022-11-25  发布在  Vue.js
关注(0)|答案(1)|浏览(391)

伙计们.我有一个有两个参数的商店页面:分页和排序。如下所示:

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

这是我路由配置:

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

现在,在我生成我的网站后,Nuxt不生成排序页面。当我转到/sort/或/sort/oldest/page/2/时,它返回404。
我需要做什么?如果我需要自己生成所有这些页面,那么这些routes.push()是做什么用的?
我还想添加“名称”和“过滤器”参数。你看,为所有这些参数生成一个动态路由是不可能的。我能做些什么?谢谢。

c7rzv4ha

c7rzv4ha1#

我使用的是Nuxt 2,通过官方文档,您需要为每个参数添加路径https://nuxtjs.org/docs/configuration-glossary/configuration-generate/#routes
对于变通解决方案,我可能会为动态页面创建一个重定向页面,URL为
example.com/shop/redirect?page=2&sort=newest
在重定向页面中:

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

相关问题