路由器链接参数中的斜线转换为%2F

Question

我想传递参数的链接，但我在链接中得到的是 %2F ，而不是斜杠

我的路线

{
                path: 'folder/:name+',
                name: 'folder',

                component: () => import("./components/FolderComponent.vue"),
                beforeEnter: (to,from,next) => {
                    console.log(to)
                    var path = '';
                    if(Array.isArray(to.params.name)) {
                        path = to.params.name.join('/');
                    } else {
                        path = to.params.name;
                    }
                    axios.get('/api/file/folder/' + path).then(r => {
                            store.commit('set_folder', r.data.data[0]);
                            next();
                        })

                }

路由器链接

 <router-link :to="{name: 'folder', params: {name: folder.path}}" class="file-preview">

参考链接

Answer 1

您可以使用

encodeURIComponent()

对值进行编码，然后再将其传递到 URL 中：

<router-link :to="{ name: 'folder', params: { name: encodeURIComponent(folder.path) }}" class="file-preview">

然后，当您提取参数时，使用

decodeURIComponent()

解码该值并恢复原始值：

beforeEnter: (to, from, next) => {
    ...
    } else {
       ...
    }
    var decodedPath = decodeURIComponent(path);
    
    axios.get(
    ...
    );
}