Question

在我的NUXT应用程序中，我希望能够转到以下网址：

'/catalog/catalog-section/page/1/sort/name/order/desc' 并且让我的vue-router像这样处理该网址：

'/catalog/catalog-section?page=1&sort=name&order=desc' 它将与路由'/catalog/:slug'匹配，并可以访问所有查询参数。

我尝试使用服务器和客户端的中间件来解析和转换url，以满足我的需求，但是就获取url而言，似乎他们使用了不同的事实来源（并且路由器-分别是静态路由器和浏览器路由器） server.js从请求获取url，客户端从浏览器窗口获取url。当服务器返回正确的带有处理过的查询参数的html，但是客户端由于尝试处理源url（'/ catalog / catalog-section / page / 1 / sort / name / order / desc'）而无法合并自身时，会导致这种情况并在大多数情况下呈现404页面
我试图用那些期望一组不同参数（页面，排序等）的标准路由来扩展我的标准路由。这样做的主要缺点是您无法预测将要获得的参数组合（尤其是在过滤内容时），因此无法为其编写路由

服务器端中间件

export default function (req, res, next) {  
  req.url = transformUrl(req.path) // nothing special, transforms '/products/test/1' to '/products/test?tab=1'
  next()
}

服务器正确返回打开了相应选项卡后呈现的页面但是在安装客户端部分时，它会以默认状态重新渲染

路由扩展

router: {
    extendRoutes(routes, resolve) {
      routes.unshift({
        name: 'product-tab',
        path: '/products/:product?/:tab?/',
        component: resolve(__dirname, 'pages/products/_product.vue')
      })
    }
  },

也许您已经解决了项目中的问题，或者知道git在实施解决方案时也遇到了类似的问题，我会很乐意提供帮助。

如何使用nuxt为查询参数实现“漂亮” URL

0 个答案: