props: true with nested routes

[skirtles-code]

Related: #1191.

I encountered this problem on Vue Land. Example:

• Playground

The key things to note are:

• The parent route is using props: true because it wants username to be passed as a prop.
• The child route is using a function for props because it wants to convert id to a number.
• Despite the number conversion, we still get a prop validation warning.

The reason this happens is because the id prop is being passed to the parent. It ends up in attrs. These are then being inherited by the root-level <RouterView /> in the parent, passing id down to the child. This then overrides the prop coming from Vue Router.

On the one hand, this is behaving as documented:

When props is set to true, the route.params will be set as the component props.

I understand that this is probably not an easy thing to change, but it seems pretty counterintuitive to me that the params defined on descendants would be applied as props to ancestors.

If nothing else, is it worth adding some extra explanation to the docs to clarify how it behaves with nested routes?