Opportunity call next as "next matched route" in beforeEnter guard with similar routes

[websharik]

What problem is this solving

Url regexp will match 3 routes, router broker choise first route, no native way to say broker "try next route" in beforeEnter guard.

routes: [
  {
    path: '/:dog',
    component: () => import('@components/Dog.vue'),
    beforeEnter(to, from, next) {
      if (isDog(to.params.dog)) next() //resume
      else ... //next route (cat)
    }
  },
  {
    path: '/:cat',
    component: () => import('@components/Cat.vue'),
    beforeEnter(to, from, next) {
      if (isCat(to.params.cat)) next() //resume
      else ... //next route (NotFound)
    }
  },
  {
    name: 'NotFound',
    path: '/:pathMatch(.*)*',
    component: () => import('@components/NotFound.vue')
  }
]

Proposed solution

Call next as "next matched route" or another hook early then beforeEnter

Describe alternatives you've considered

Make named routes and use redirect by name (not universal, naming required).

Single route, then v-if "routing" inside component. (not good, routing must be in router)

Find "next matched route" manualy and redirect. (partial same broker's work)

[posva]

Having multiple routes that match the exact same params like that is considered a bad practice as it creates ambiguous routes. By adding a prefix to them like /cats/:cat (or /cat-:cat, /c_:cat, etc) and /dogs/:dog, you will not only avoid this issue but improve the discoverability of your routes