Nested router views with same parameter key as parent should warn the user

[lehni]

Version

2.4.0

Reproduction link

https://jsfiddle.net/lehni/nwqjut5c/

Steps to reproduce

Click on the Visit /foo/1/bar/2 link in the example. This will render two nested views, and each view will output the parameter that received (this.id)

What is expected?

The first view should receive id=1, and the 2nd id=2, so I expect this to be printed:

View id=1
View id=2

What is actually happening?

Both views appear to receive the same parameter, the value of the last one, and instead this is printed:

View id=2
View id=2

Just give different names to properties. Otherwise second 'id' overwrites previous $route.params.id value: https://jsfiddle.net/wostex/20xu35hn/1/

[lehni]

I encountered this while working on an admin editor framework that is auto-generated from schemas described in JavaScript object literals. In this I do use such nested views, and they are each mapped to receive their id from the url as a prop. Since the two (or multiple, based on the schema) views are the same type of component, and the url parameters are mapped to the same property, I cannot simply rename it.

While I understand that $route.params.id gets overridden, I would still expect the parsing to do the right thing and have the mapped this.id inside the component instances reflect the correct value.

[posva]

The result is expected but we can definitely add a warning about using the same param multiple times, but since the params object merges all params, that admin editor needs to use different params keys

[lehni]

I agree, a warning would be good. I am new to Vue and have always been using the method to pass props to route components, so I wasn't even aware that they get flattened in the $route.params object first. From my perspective it seemed strange that the mapping from the url to the component props doesn't work this way. Perhaps they shouldn't go through the flattening process first when used as props? Just a thought.