如何在Vue Router的beforeEach函数中获取路由传入的props

你可以通过to.matched数组访问匹配到的路由记录，从中提取props配置。具体实现如下：

静态对象形式的props（你的场景） #

对于你配置的静态对象类型props，直接从匹配到的路由记录中读取即可：

router.beforeEach((
  to: RouteLocationNormalized,
  from: RouteLocationNormalized,
  next: NavigationGuardNext
) => {
  // 获取第一个匹配的路由记录（一级路由场景下就是目标路由）
  const targetRoute = to.matched[0];
  if (targetRoute) {
    const routeProps = targetRoute.props;
    console.log(routeProps); // 输出：{ endpoint: '/admin/regions/index' }
  }
  next();
});

处理函数形式的props #

如果你的props是函数形式（比如动态生成props），需要调用该函数并传入当前路由对象来得到计算后的props：

router.beforeEach((
  to: RouteLocationNormalized,
  from: RouteLocationNormalized,
  next: NavigationGuardNext
) => {
  const targetRoute = to.matched[0];
  if (targetRoute) {
    let routeProps;
    if (typeof targetRoute.props === 'function') {
      // 调用props函数获取动态计算后的props
      routeProps = targetRoute.props(to);
    } else {
      // 静态对象直接使用
      routeProps = targetRoute.props;
    }
    console.log(routeProps);
  }
  next();
});

说明 #

• to.matched是一个数组，包含了所有嵌套匹配的路由记录。如果是嵌套路由场景，需要根据实际层级选择对应的索引（比如to.matched[1]表示子路由）。
• 若路由配置中未定义props，则targetRoute.props会是undefined，建议添加判断避免报错。

内容的提问来源于stack exchange，提问作者zoltalar