Vue-router: 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.

[sodatea]

@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?

[sodatea]

@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.

[adelineu]

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'
})

[ghost]

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?' },

[yaoyanweb]

@yyx990803 请问路由传参后 另以页面怎么获取那个参数？

[JerryChin]

@yaoyanweb
根据官方文档所述：

当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用

[Yuloongm]

请问使用addRouter 添加路由后出现[vue-router] Duplicate named routes definition: { name: "administration_index", path: "/administration/index" }
添加路由的格式如下
` {
path: '/permision',
icon: 'locked',
name: 'permision',
title: '用户权限管理',
component: Main,
children: [{
path: 'index',
title: '用户权限管理',
name: 'permision_index',
component: () =>
import ('@/views/xx/permisionSystem.vue')
}

    ]
}`

这是什么问题呢

[andrewevans]

For anyone coming from Ember and are used to the the optional ability, this is built in to this plugin now as @bee-keeper stated. Gets rid of lots of LOC.

[bsienn]

Docs on that here.

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

@yyx990803 @bee-keeper
IMHO, it should be in router docs/guide Dynamic Route Matching, not mainly in example code.

[posva]

@bsienn It says to look at path-to-regexp documentation on that page. I just pushed a change to docs to pin the links to path-to-regexp

For anybody coming here for optional parameters, it's achieved by appending a ? to a param: /threads/:id?. More by following the link at https://router.vuejs.org/guide/essentials/dynamic-matching.html#advanced-matching-patterns.

Locking this as it was resolved long time ago