Optional route params

[envomer]

Is it possible to have optional route params?

Such as

router.map({
    '/foo/:bar?': { // bar is optional
        component: Foo
    },
    '/bar': {
        component: Bar
    }
})

[yyx990803]

Just add a rule that maps /foo to component Foo. The question mark is used for query strings and therefore the syntax will be confusing.

[haoqunjiang]

@yyx990803
What if I want to have an optional parameter in a named route?

The following code does not work

router.map({
    '/threads/:threadId/': {
        name: 'thread',
        component: ThreadView
    },
    '/threads/:threadId/:pageNum': {
        name: 'thread',
        component: ThreadView
    }
})

[yyx990803]

@sodatea they are not the same route, why give them the same name?

[haoqunjiang]

@yyx990803
Because the two routes are equivalent underlyingly, it's natural for them to share the same name.

An optional parameter means that the template markup needn't to care about what value to pass for the parameter. But if you have to define another route for that purpose, the template markup would end up taking care of the router name instead, which brings no benefit at all.

[nullptr128]

I agree, stumbled upon this today as well. It would be great to have an optional parametr that will be just undefined if not set.

Yeah.. I also needed and still need an option for an optional param. +1

[simplesmiler]

If the parameter is not required, then how about turning it into a query parameter instead?
/threads/1?page=2

[Saymon-biz]

There is many different situations where a parameter must be optional
e.g. not authenticated user tried to get access to the following url:
/administration/users
and we need to redirect him to login page with optional parameter "redirect-after-login" (e.g. /login/%20administration%20users) to redirect him to /administration/users after authentication.
But this route also should work without parameter, e.g. if user clicked directly by the link to the login page.
Right now I can solve this issue the following way:

router.map({
  '/login': {
    name: 'login',
    component: Login
  },
  '/login/:redirect-after-login': {
    name: 'login-with-redirect',
    component: Login
  }
})

Seems I can't solve this without duplicating route definition.
An optional parameter looks better, isn't it?

[simplesmiler]

@Saymon-biz this perfectly fits to /login?redirect=<encoded_url>.

[repsac-by]

My solution for the topic starter

router.map({
    '/threads/:threadId/:pageNum': {
        name: 'thread',
        component: ThreadView
    }
})

router.alias({
'/threads/:threadId': '/threads/:threadId/0'
})

Don't mean to necro this thread, but I would like to see optional parameters soon. Duplicate route definition doesn't seem to be working correctly and just randomly broke (we can't figure out why). We've sank a lot of time and thought into this problem and it would just be solved if vue-router supported this.

[yyx990803]

@lgdexter fyi this is supported in 2.0

[bee-keeper]

Docs on that here.

// a param can be made optional by adding "?" { path: '/optional-params/:foo?' },