有没有办法在 beforeRouteEnter 中显示 bootstrap-vue $toast 反馈？

Posted 2023-02-22

【中文标题】有没有办法在 beforeRouteEnter 中显示 bootstrap-vue $toast 反馈？

【英文标题】：Is there a way to show a bootstrap-vue $toast feedback in beforeRouteEnter?

【发布时间】：2020-06-19 02:48:53

【问题描述】：

我有一个加载单个用户的组件，所以我使用vue-router 保护来加载数据，并在出错的情况下重定向回用户列表组件。

有没有办法显示vue-bootstrap $toast？通常我从this组件访问$toast，但显然this在beforeRouteEnter中还不存在。

我知道我可以通过其他方式进行管理（在页面中显示错误并使用created()，或使用vuex 保留错误并在下一页中显示），但由于我使用的是$toast我想在任何地方保持一致性。

我不知道...如果我能访问根组件，我就能访问$toast，但我看不到方法。

// userComponent

// ...
  beforeRouteEnter(to, from, next) 
    Promise.all([store.dispatch("users/fetchOne",  id: to.params.id  )])
      .then(next)
      .catch(() => 
        // this.$root.$bvToast.toast("ERROR!!!",  variant: "danger" ); // can't do this :(
        next("/users");
      );
  ,
//...

【参考方案1】：

在 beforeRouteEnter 中您无权访问此内容。所以你可以在下面做：

next(vm => 
    vm.$root.$bvToast.toast(...)
)