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

Question

I have a router in Vue looking like this:

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

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

I want to send a value for the "tempUrl"-param that could for example look like this: https%3A%2F%2Fwww.amazon.se%2F%5Bn%5Btest%5B~%5B (this value is coming from encodeURIComponent() function, so it should be able to be used in the URL)

This does not seem to work for some reason, When I try to access this page I get: "There was no web page at the URL: http://localhost:3000/temporaryList/https%3A%2F%2Fwww.amazon.se%2F%5Bn%5Btest%5B~%5B "

I have built this exact same solution with node and express where this didn't seem to be an issue. I don't know if the value of the param I send is to long for Vue? It also seems like Vue does not like when a params includes a "%" for example.

Is there any way you can make Vue routers allow this type of param-value?

Answer 1

Vite uses the decodeURIComponent function on the request URL. The value of the param i sent had "%" included in it which made Vite read every "%" as a "/". That made Vite searchfor a location that did not exist.

This npm-package solved my issue: https://github.com/ivesia/vite-plugin-rewrite-all