CODEWITHSUNDEEP
javascriptvue.jsvue-componentvue-router
Adam Orłowski
Adam Orłowski

Reputation: 4484

vue router /:param with slashes

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?

Upvotes: 8

Views: 8506

Answers (2)

PayteR
PayteR

Reputation: 1757

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

Upvotes: 4

nemesv
nemesv

Reputation: 139808

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

Upvotes: 28

Related Questions