Vue-router: Request: pass in optional params to named route

[TheDutchCoder]

I don't know if it's possible, but I'd like to be able to pass in optional parameters into a named route, so that I can expose certain properties in the route without it rendering in the URL.

Example:

'/menu/:category': {
    name: 'menu',
    component: menu
}

// Would expose ID 200, so data can be fetched by ID.
<a v-link="{ name: 'menu', params: { category: 'Pizza', categoryId: 200 } }">Pizza</a>

Unless there's already a way of doing this that I'm not aware of ;)

[azamat-sharapov]

You need to have separate route mapping for that:

'/menu/:category/:categoryId': {
    name: 'category-menu',
    component: menu
}

[TheDutchCoder]

Unfortunately that won't make the params optional.
E.g. if I don't pass in a category, it will end up as /menu/undefined/44.

[rpkilby]

Do nested routes not cover your use case?

That said, I did just have a case where I wanted to pass optional paramaters to the route that were not exposed as part of the path or querystring.

[TheDutchCoder]

Nested routes won't be a solution either.

Again, I'm really just looking for a way to supply additional data to a route, without it showing up in the actual URL.

In React Router there's a way to do that, which is great for the solution I'm looking for (e.g. have a "nice" URL by using a name, but supplying an ID for a more reliable data lookup).

[jsiebach]

Tried out a few things and I agree that this isn't currently possible. I can think of a couple ways this could be implemented:

1. Parameters in the v-link object could over-write custom variables on the named route, as in this fiddle I was playing around with: https://jsfiddle.net/u212ge8k/2/
2. Transition object could expose a property link that contains the v-link object. Then this could be accessed like transition.link.categoryId or something like that.

Gonna take a look through the source code and see if either of those makes sense.

[dengjianan]

when u activate the /menu/categoryName
the problem will alert like this

[azamat-sharapov]

@dengjianan that's not related to vue-router, but vue-resource.

[dengjianan]

@azamat-sharapov how to solve that problem
'/life': { name: 'life', component: require('../components/articleList.vue') }, '/life/:year': { name: 'life', component: require('../components/detailList.vue') }, '/life/:year/:month': { name: 'life', component: require('../components/detailList.vue') }, '/life/:year/:month/:id': { name: 'life', component: require('../components/articleItem.vue') } })
when I activate the route of /life/2016/5 it alert the upon problem

[azamat-sharapov]

@dengjianan this is not place to ask questions.

Warning you get is most likely from somewhere else. You need to provide reproduction, and post your question in forum.

[yyx990803]

"Optional route params that doesn't show up in the URL" is impossible, because if it doesn't show up in the URL then it is not a route param, but rather application state.

If the param is not in the URL then there's no way for others to navigate to that page without clicking the link. This is defeating the purpose of the URL.

[airtonix]

@yyx990803 obviously @TheDutchCoder meant params that are not part of the path, but instead optionally a querystring parameter.

@TheDutchCoder https://github.com/inca/voie handles this case easily.

[warent]

@yyx990803 I definitely agree that it seems unlikely there would be a time when it's appropriate to pass application state across routes.

However, consider this: a route www.example.com/blog that loads 10 blog posts with all their data. If you click on one of the blog posts, it will update the address bar to www.example.com/blog/:id and show an isolated view of the blog post for sharing. Now, unless we can pass state params across routes, we have to fetch the data from the server again or awkwardly "cache" it, even though we just had it in the previous state.

Disallowing this feature does prevent anti-patterns, but also forces perfectly valid purposes to have to store the state in roundabout methods.

[fnlctrl]

@warent In your case, vuex is designed to solve this problem of sharing state across components, so it shouldn't be vue-router's concern.
Basically, with vuex, you can achieve:

1. Save 10 blog posts to store when visiting www.example.com/blog
2. When visiting www.example.com/blog/:id, check if there is the corresponding blog post available in the store, if so, use the one in the store. If not, fire a new request to get the blog by id, and then save it to the store.

[warent]

@fnlctrl Ah, okay that makes sense. I like it! Thanks for the suggestion

[pepoospina]

It would be useful to handle non-critical state (state not strictly needed to render the URL).

In my case, I would like to control the transition used to swap the <router-view> based on some metadata existing only where the <router-link> is and not available at the beforeEach guards. I don't care if another user sees the wrong animation when accessing the URL from the outside. I could even turn off the animation when the parameter is not received.

[musman92]

optional param look like this
add ? at the end
'/menu/:category?': {
name: 'menu',
component: menu
}

@TheDutchCoder