vue 路由器/：带斜杠的参数答案

【问题标题】：vue router /:param with slashesvue 路由器/：带斜杠的参数
【发布时间】：2019-05-22 06:07:49
【问题描述】：

我有一个这样的路由器：

routes: [
    {
      path: '/survey/:surveyHash',
      name: 'survey',
      component: Survey,
      props: true,
    },

在组件中，我试图在道具中获取surveyHash。问题是当surveyHash 里面有/ 斜线时我做不到。

vue-router 有解决方案吗？

【问题讨论】：

【解决方案1】：

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

routes: [
    {
      path: '/survey/:surveyHash(.*)',
      name: 'survey',
      component: Survey,
      props: true,
    },

这样您将获得 URL 的其余部分，包括 surveyHash 中的斜线

【讨论】：

【解决方案2】：

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

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

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

【讨论】：