代码之家 › 专栏 › 技术社区 › Lex Webb

Vue路由器ID中的自定义前斜杠处理

vue-router vue.js

0

Lex Webb · 技术社区 · 7 年前

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

我当前的路线如下:

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

所以当用户浏览到上面的URL时,就会显示浏览组件。

但是,我想使用路径的ID部分( :path* )包含一个可嵌套的域系统类路径,供我的浏览页面使用。

例如,URL /browse/project/project1 将我的树中的两个级别降到Project1项目。

现在,我遇到的问题是,当以编程方式导航时,Vue路由器正在逃避我的ID(路径),而我的URL最终是这样的: /browse/project%2Fproject1 .这是不理想的,对最终用户来说不好看。此外,如果用户确实浏览到 /浏览/项目/项目1 手动应用程序将正常工作,甚至将原始编码保留在URL栏中。

所以我可以解决这个问题,我做了任意数量的子路径,希望系统永远不会越过这些路径,但这不是解决我的问题的好方法。

我还应该澄清的是,应用程序对之后的路径一无所知 /browse 因为这是由驱动应用程序的API动态生成的。

在Vue路由器中是否有本地方法来处理此问题?或者我应该改变我的做事方式。

2 回复 | 直到 7 年前

1

0

i_deologic 7 年前

我只是在面对一个类似的问题时,对你的问题犹豫不决。

认为这是因为一个ID应该标识一个资源,而不是一个资源的嵌套结构/路径。

虽然我还没有解决我的问题,但您可能想使用一个CustomQueryString:

https://router.vuejs.org/api/#parsequery-stringifyquery

https://discourse.algolia.com/t/active-url-with-vue-router-for-facet-and-queries/3399

2

0

Lex Webb 7 年前

所以我设法用一点黑客手段来“修复”这个问题。

创建Vue路由器实例时,我正在附加 beforeEach 函数替换'/'的任何传出编码。这将向客户端发送我要查找的“正确”URL。

const router = new Router({
    mode: 'history',
    routes,
});

router.beforeEach((to, from, next) => {
    // hack to allow for forward slashes in path ids
    if (to.fullPath.includes('%2F')) {
        next(to.fullPath.replace('%2F', '/'));
    }
    next();
});