vue-router: Optional fixed + path parameter

Question

I want to have one route object for the following scenarios:

/a/123/b
/b

What I have tried, is:

{ path: '(a/:a)?/b', ... }

This seems to work when testing the path on the Express route tester, but only for path-to-regexp version 0.1.7. Any version above that will escape special characters.

In what way is this possible with the new version of path-to-regexp that vue-router uses?

They both use github.com/pillarjs/path-to-regexp according to the docs. I added the Express route tester example to illustrate the change in behavior in the different path-to-regexp versions. — Kees van Lierop
– Kees van Lierop, Commented Mar 31, 2019 at 16:14

mikeemay · Accepted Answer · 2019-03-31 23:40:16Z

4

Express Router and Vue Router are different, but if what you mean is you want to create a route with dynamic url, then perhaps you can use named routes from https://router.vuejs.org/guide/essentials/named-routes.html

For example:

 const router = new VueRouter({
  routes: [
    {
      path: '(a/:a)?/b',
      name: 'a',
      component: SomeComponent
    }
  ]
})

Then your navigation to SomeComponent should have something like:

<router-link :to="{ name: 'a', params: { a: 123 }}">SomeComponent</router-link>

edited Mar 31, 2019 at 23:40

answered Mar 31, 2019 at 14:29

mikeemay

593 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kees van Lierop Over a year ago

Of course they are different, but under the hood they both use path-to-regexp github.com/pillarjs/path-to-regexp. I added the Express route tester example to illustrate that what you are suggesting does work for path-to-regexp@0.1.7, but not for >=1.0, which is what vue-router is using. As mentioned in my question, I have tried the answer in your suggestion, but because the newest version of path-to-regexp encodes special characters, it does not work.

Collectives™ on Stack Overflow

vue-router: Optional fixed + path parameter

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related