具有长 url-param 的 Vue 3 路由器，包括无法按预期工作的特殊字符？

Question

我在 Vue 中有一个路由器，如下所示：

    {
      path: '/temporaryList/:tempUrl',
      name: 'temporaryList',

      component: () => import('../views/TemporaryListView.vue')
    }

我想为“tempUrl”-param 发送一个值，例如，它可能如下所示： https%3A%2F%2Fwww.amazon.se%2F%5Bn%5Btest%5B~%5B （此值来自 encodeURIComponent() 函数，因此它应该能够在 URL 中使用）

由于某种原因，这似乎不起作用，当我尝试访问此页面时，我得到： "There was no web page at the URL: http://localhost:3000/temporaryList/https%3A%2F%2Fwww.amazon.se%2F%5Bn%5Btest%5B~%5B "

我已经用 node 构建了这个完全相同的解决方案，并表达了这似乎不是问题的地方。不知道我传的param的值是不是long for vue？例如，当参数包含“%”时，Vue 似乎也不喜欢。

有什么方法可以使 Vue 路由器允许这种类型的参数值吗？

Answer 1

Vite 在请求 URL 上使用 decodeURIComponent 函数。我发送的参数值中包含“%”，这使得 Vite 将每个“%”读取为“/”。这使得 Vite 搜索了一个不存在的位置。

这个 npm-package 解决了我的问题：https://github.com/ivesia/vite-plugin-rewrite-all

具有长 url-param 的 Vue 3 路由器，包括无法按预期工作的特殊字符？

Vue 3 router with long url-param including special chars not working as intended?

url

url-parameters

vue.js

vuejs3