Nuxt 使用双冒号编码/解码 URI [英] Nuxt encode/decode URI with double colon

问题描述

我的网址上有双冒号.

我向 Nuxt 路由器推送了一条路径，其中包含 :.

I push a path to Nuxt router which has : as a part of it.

  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 时，: 在导致此错误消息的 URL 上被翻译为 %3A:

When I point to http://localhost:3000/towns:3 , for example, the : is translated as %3Aon the URL leading to this error message:

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

如何将其恢复为:?

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

I tried encodeURI(), decodeURI(), encodeURIComponent() and decodeURIComponent() in vain.

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

欢迎任何建议

推荐答案

Vuex 使用的是 vue-router 而 vue-router 使用的是 path-to-regexp 解析路由器路径配置

Vuex is using vue-router and vue-router is using path-to-regexp to parse router path configuration

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

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
    }

当然，结果将是 $route.params.id 值将以 : 为前缀，并且所有 router-link 参数必须是:XX 而不是 'XX' 但这是你可以处理的.vue-router (path-to-regexp) 正在使用 : 来标记"命名路径参数......没有办法绕过它

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

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

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

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

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)...

这篇关于Nuxt 使用双冒号编码/解码 URI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！