Nuxt动态路由static生成后返回404

Question

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

 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 不会生成排序页面。 当我 go 到 /sort/ 或 /sort/oldest/page/2/ 它返回 404。

我需要做什么？ 如果我需要自己生成所有这些页面，那么这些 routes.push() 有什么用？

我还想添加“名称”和“过滤器”参数。 您会看到为所有这些参数生成动态路由是不可能的。 我能做什么？ 谢谢。

Answer 1

我使用 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}`)
    }