Vue3 路由器 - 如何在子路由中使用 beforeRouteEnter？

Question

我想在根路由上有一个可选组件，它会根据路由参数中提供的 ID 显示详细信息页面。如果 id 参数不对应任何对象，我希望将用户重定向到根路由。我相信 beforeRouteEnter() 可能是实现此目的的好方法，但它似乎没有在以下代码片段中被调用：

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

我的beforeRouteEnter实现哪里出错了？或者我应该使用完全不同的东西来实现我想要的吗？谢谢。

Answer 1

问题是您应该使用 beforeEnter。 beforeRouteEnter 是组件方法。

您可以查看在哪里使用它们here。

Vue3 路由器 - 如何在子路由中使用 beforeRouteEnter？

Vue3 router - how to use beforeRouteEnter in child route?

vue.js

vue-router