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

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?

I need to get param as `abc/def` in my component using `this.$route.params.param` . No problem if url is shown as `/my-route/abc/def` — LJP, Sep 12 '17 at 11:53

score 2 · Accepted Answer · answered Sep 12 '17 at 11:57

2

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>

answered Sep 12 '17 at 11:57

Suresh Velusamy

1 Answers1