如何将包含斜杠（'/'）的字符串作为参数传递给vue.js中的路由

Question

我正在使用vue路由器，我有一条路线

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

我的链接指向

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

如果myParam是包含'/'的字符串，例如'abc/def'，则会导航到不存在的链接/my-route/abc/def。怎么解决这个？

Answer 1

您必须使用javascript函数encodeURIComponent(uri)

对网址进行编码

更新您的路由器链接

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