在beforeRouteEnter中是否有一种方法可以显示Bootstrap-Vue $ toast反馈？

Question

[我有一个加载单个用户的组件，所以我使用vue-router防护程序加载数据，并在发生错误的情况下重定向到用户列表组件。

是否可以显示vue-bootstrap $toast？通常，我从$toast组件访问this，但显然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");
      });
  },
//...

Answer 1

您可以//通过vm访问组件实例，如下所示：

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