Question

我有一个像这样的路由器：

CamelContext

在组件中，我尝试获取道具中的routes: [ { path: '/survey/:surveyHash', name: 'survey', component: Survey, props: true, },。问题是surveyHash中有/斜杠时我不能做。

vue-router中是否有解决方案？

Answer 1

您可以在路线定义中使用custom matching pattern

private setQueryParams(): HttpParams {
    const params = new HttpParams();
    if (this.page) {
       params.set('page', this.page.toString());
    }
    ...etc
    return params;
}

通过此操作，您将获得URL的其余部分，包括routes: [ { path: '/survey/:surveyHash(.*)', name: 'survey', component: Survey, props: true, },

中的斜杠。

Answer 2

还有更优雅的解决方案。 Vue路由器在幕后使用path-to-regexp模块，并提供了开箱即用的解决方案

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

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

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

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

Vue路由器/：带有斜杠的参数

2 个答案: