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 is using vue-router and vue-router is using path-to-regexp to parse router path configuration

It seems to me, that you are trying to use Unnamed Parameters which doesn't make sense because vue-router/vuex need the name of the parameter to pass it down to Vue component behind the route

Why don't just use named parameters ?

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

Sure, result will be that $route.params.id value will be prefixed with : and all router-link params must be :XX instead of 'XX' but that's something you can deal with. vue-router (path-to-regexp) is using : to "mark" named path parameters ...there's no way around it

You can take a look at this sandbox. Its not Nuxt but I'm pretty sure it will work in Nuxt same way....

Update

Well it really doesn't work in Nuxt. It seems Nuxt is for some reason applying encodeURIComponent() on matched path segments and throws an error. It works when server-side rendering tho (it throws some error on client still)...

Answer 2

首先，我同意Michal Lev\xc3\xbd\ 的回答，即这里存在一个库错误。引发错误的行位于 Nuxt 源代码中：

\n\n

https://github.com/nuxt/nuxt.js/blob/112d836e6ebbf1bd0fbde3d7c006d4d88577aadf/packages/vue-app/template/utils.js#L523

\n\n

您会注意到该段的几行已编码，导致:切换到%3A.

\n\n

然而，这一行似乎源自 path-to-regexp：

\n\n

https://github.com/pillarjs/path-to-regexp/blob/v1.7.0/index.js#L212

\n\n

修复这个错误并不容易，因为编码不仅仅是“错误”。这里发生了很多事情，当到达该行时，参数值已从其原始值进行 URL 解码。如果我们的未编码:会导致问题，但在其他情况下，例如匹配%3A，则需要编码。

\n\n

正则表达式路径中的编码处理是一个微妙的话题，我们无法从使用的旧版本中得到帮助。这也使得在应用程序中找到合适的解决方法变得更加困难。

\n\n

那么，让我们看看我们能做什么......

\n\n

首先，让我们考虑一下路径：

\n\n

path: \'towns\' + \'(:[0-9].*)?/\',\n

\n\n

像这样连接字符串有点奇怪，所以我将把它们组合起来：

\n\n

path: \'towns(:[0-9].*)?/\',\n

\n\n

最后/并没有造成伤害，但对于这个问题来说，这似乎是不必要的噪音，所以我要放弃它。

\n\n

另一方面，一/开始没有 可能会导致重大问题，所以我将添加一个。

\n\n

也.*很可疑。你真的意味着匹配任何东西吗？例如，当前路线将匹配towns:3abcd。这真的是你想要的吗？我怀疑你只想匹配数字。例如towns:3214。为此，我使用了[0-9]+.

\n\n

这给我们留下了这个：

\n\n

path: \'/towns(:[0-9]+)?\',\n

\n\n

现在，:问题来了。

\n\n

一般来说，路由路径用于两个方向：匹配/解析 URL 和构建 URL。您使用未命名参数让我想知道您是否只想将此路由用于匹配目的。

\n\n

一种选择可能是这样的：

\n\n

path: \'/towns:([0-9]+)\',\n

\n\n

通过移动:参数的外部，它可以避免编码问题。

\n\n

上面的代码有两个问题：

\n\n

\n
1. URL 上的冒号/数字后缀不再是可选的。即它不会/towns像原始路线那样匹配路径。/towns这可以通过注册为单独的路由来解决。我不知道有任何其他方法可以使用可用版本的 path-to-regexp 来解决此问题。
\n
2. 您将无法使用它来构建 URL，例如使用nuxt-link.
\n

\n\n

如果您也需要能够使用它来构建 URL，那么您可以使用命名参数：

\n\n

path: \'/towns::town([0-9]+)\',\n

\n\n

这里的部分::可能会令人困惑。第一个:按字面意思处理，而第二个则:用作参数的前缀town。然后你可以像这样使用它nuxt-link：

\n\n

<NuxtLink :to="{ name: \'custom\', params: { town: 4 } }">\n ...\n</NuxtLink>\n

\n