How to pass a string containing slash ('/') as parameter to a route in vue.js [duplicate]

Question

I am using vue router and I have a route

{ path: '/my-route/:param?', component: MyComponent }

I have the link to my route as

<router-link :to="'/my-route/'+myParam">Link text</router-link>

if myParam is a string containing '/' like 'abc/def', it navigates to the link /my-route/abc/def which doesn't exists. How to solve this?

Answer 1

You have to encode the url with javascript function encodeURIComponent(uri)

Update your router-link

<router-link :to="'/my-route/'+encodeURIComponent(myParam)">Link text</router-link>