自定义处理 vue 路由器 ID 中的正斜杠

Question

我有一个用例需要 vue 路由的 id 部分包含未转义的正斜杠。

我目前的路线是这样的：

{
    path: '/browse/:path*',
    component: browse,
    name: 'browse',
    displayName: 'Browse',
    meta: { title: 'Browse' },
},

因此，当用户浏览到上述 url 时，就会显示浏览组件。

但是，我想使用路径 ( :path*)的 id 部分来包含一个可嵌套的文件系统，例如我的浏览页面将使用的路径。

例如，该 url/browse/project/project1会将我的树中的两个级别带到 project1 项目。

现在，我跑入的问题是，编程导航时VUE路由器逃避IDS我（路），和我的URL最后是这样的：/browse/project%2Fproject1。这是不理想的，对最终用户来说也不好看。此外，如果用户确实/browse/project/project1手动浏览到该应用程序将正常工作，甚至在 url 栏中保留原始编码。

所以我可以通过创建任意数量的子路径来解决这个问题，并希望系统永远不会超过这些，但这不是解决我的问题的好方法。

我还应该澄清一下，应用程序将不知道任何关于路径的信息，/browse因为它是由为应用程序提供动力的 api 动态生成的。

vue-router 中是否有本地方式来处理这个问题？或者我应该改变我做事的方式。

Answer 1

有一个没有变通方法的更优雅的解决方案。

Vue 路由器在引擎盖下使用路径到正则表达式模块和类似的结构

const regexp = pathToRegexp('/browse/:path*')
// keys = [{ name: 'browse', delimiter: '/', optional: true, repeat: true }]

https://github.com/pillarjs/path-to-regexp#zero-or-more

const regexp = pathToRegexp('/browse/:path+')
// keys = [{ name: 'browse', delimiter: '/', optional: false, repeat: true }]

https://github.com/pillarjs/path-to-regexp#one-or-more

将重复标志设置为true. 任何具有重复标志的数组参数都将与分隔符（默认'/'）连接。

所以你可以传递一个拆分的数组['project','project1']而不是'project/project1'into router.push()：

router.push( {name: 'browse', params: {path: ['project','project1']}} ); 

或者

router.push( {name: 'browse', params: {path: 'project/project1'.split('/')}} );