vue.js - Nuxt 使用双冒号编码/解码 URI

Question

我的网址上有双冒号。

我向 Nuxt 路由器推送了一条路径，其中包含 :作为其中的一部分。

  export default {
  router: {
    extendRoutes (routes, resolve) {
      routes.push({
        name: 'custom',
        path: 'towns' + '(:[0-9].*)?/',
        component: resolve(__dirname, 'pages/404.vue')
      })
    }
  }
}

当我指向 http://localhost:3000/towns:3 ，例如 :译为 %3A在导致此错误消息的 URL 上:

Expected "1" to match ":[0-9].*", but received "%3A2"

如何将其恢复为 : ?

我尝试了 encodeURI()、decodeURI()、encodeURIComponent() 和 decodeURIComponent() 都是徒劳的。

想要尝试的人的演示: nuxt-extend-routes

欢迎任何建议

Answer 1

Vuex 正在使用 vue-router并且 vue-router 正在使用 path-to-regexp解析路由器路径配置

在我看来，您正在尝试使用 Unnamed Parameters这没有意义，因为 vue-router/vuex 需要参数的名称才能将其传递给路由后面的 Vue 组件

为什么不只使用命名参数？

{
      path: '/towns:id(:\\d+)',
      name: 'Page 3',
      component: Page3
    }

当然，结果将是 $route.params.id值将以 : 为前缀和所有 router-link参数必须是 :XX而不是“XX”，但这是您可以处理的。 vue-router ( path-to-regexp ) 正在使用 : “标记”命名路径参数......没有办法解决它

你可以看看 this sandbox .它不是 Nuxt，但我很确定它会以同样的方式在 Nuxt 中工作......

更新

好吧，它在 Nuxt 中确实不起作用。 Nuxt 似乎出于某种原因正在申请 encodeURIComponent()在匹配的路径段上并抛出错误。它在服务器端渲染时工作(它仍然在客户端上抛出一些错误)......