Vue3 router - how to use beforeRouteEnter in child route?-CodePudding

I would like to have an optional component on the root route which would be display detail page based on the id provided in the route params. In case when the id param does not correspond to any object, I wish to redirect the user to the root route. I believe beforeRouteEnter() could be a nice way to achieve this, however it does not seem to get called in the following code snippet:

{
 path: '/',
 name: 'Home',
 component: Home,
 children: [
  {
    path: '/:id(\\d )',
    name: 'Detail',
    component: Detail,
    beforeRouteEnter(to, from, next) {
      alert("beforeRouteEnter in child!")
    }
  }]
}

Where is the mistake in my beforeRouteEnter implementation? Or should I use something completely different to achieve what I want? Thank you.

CodePudding user response：

The problem is that you should be using beforeEnter. beforeRouteEnter is a component method.

You can check out where to use each of them here.