feat: throw if parent and child routes have the same name

[skirtles-code]

#2266 demonstrated an edge case that can lead to inconsistent internal state in the matcher.

The problem arises when using nested routes. If the child (or deeper descendant) has the same name as its parent, the parent is removed at the same time that the child is added.

Removing a parent route should also remove its children, but in this case that removal happens just before the child is added to the matcher. The child still gets added to the matcher, and its parent property still points to the parent route, even though that has now been removed. The parent can no longer be resolved directly, but when resolving the child, the matched array will still contain the removed parent.

This problem can occur during the initial router creation:

createRouter({
  // ...
  routes: [{
      name: 'abc',
      // ...
      children: [{
        name: 'abc',
        // ...      
      }]
  }]
})

It can also happen when adding a route dynamically:

const router = createRouter({
  // ...
  routes: [{
      name: 'abc',
      // ...
  }]
})

router.addRoute('abc', {
  name: 'abc',
  // ...      
})

This PR introduces a dev-only check for ancestors with the same name and throws an error if a duplicate is found.

[netlify]

✅ Deploy Preview for vue-router canceled.

Name	Link
🔨 Latest commit	abc8313
🔍 Latest deploy log	https://app.netlify.com/sites/vue-router/deploys/67210c887f06600008b1e9a8

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 91.01%. Comparing base (e8791aa) to head (3f6f633).
Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2267      +/-   ##
==========================================
+ Coverage   90.96%   91.01%   +0.04%     
==========================================
  Files          24       24              
  Lines        1151     1157       +6     
  Branches      355      358       +3     
==========================================
+ Hits         1047     1053       +6     
  Misses         64       64              
  Partials       40       40              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[sherleysong]

How can i make / to Home , make /foo to Foo , while all the left "/:pathMatch(.*)" to PAGE_NOT_FOUND ?
{ path: '/', name: 'home', component: Main, redirect: '/home', children: [ { path: '/home', name: 'home', component: Home }, { path: '/:pathMatch(.*)', component: () => Error } ] }

[skirtles-code]

@sherleysong I don't fully understand your question, but you need to remove the name: 'home' from the parent route.

[sherleysong]

@sherleysong I don't fully understand your question, but you need to remove the name: 'home' from the parent route.

It worked , thank you !

The running code was { path: '/', name: 'home', component: Main, redirect: '/home', children: [ { path: '/home', name: 'home', component: Home }, { path: '/:pathMatch(.*)', component: () => Error } ] }

@vue-router@4.3.2, when we visit www.xxx.cn , it will redirect to Home.
@vue-router@4.3.3, when we visit www.xxx.cn , it will redirect to Error. (which was wrong yesterday)

as you recommended , i removed the name: 'home' from the parent route , then
@vue-router@4.3.3, when we visit www.xxx.cn , it will redirect to Home.

Anyway , it worked for me , thank you again!

[posva]

Thanks for this. I really didn't expect people to fall into this but I was wrong