vue router /:param 带斜线

Question

我有这样的路由器：

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

在组件中，我试图在道具中获得 surveyHash。问题是当 surveyHash.

里面有 / 斜线时我做不到

vue-router有解决办法吗？

Answer 1

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

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

有了这个，您将获得 URL 的其余部分，包括 surveyHash

中的斜杠

Answer 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 }]

vue router /:param with slashes