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?
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
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 }]
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.