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

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://www.amazon.se/[n[test[~[ (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://www.amazon.se/[n[test[~[ "

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?

CodePudding user response：

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