vue router /:param with slashes

Question

I have a router like this:

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

In the component I'm trying to get surveyHash in props. The trouble is I can't do it when there are / slashes inside surveyHash.

Is there a solution in vue-router?

Answer 1

You can use a custom matching pattern in your route definition

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

With this you will get the rest of the URL including slashes in surveyHash

Answer 2

There is more elegant solution. Vue router uses path-to-regexp module under the hood and it have solution for this out of the box

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