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

【问题标题】：Is there a way to show a bootstrap-vue $toast feedback in beforeRouteEnter?有没有办法在 beforeRouteEnter 中显示 bootstrap-vue $toast 反馈？
【发布时间】：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");
      });
  },
//...

【问题讨论】：

标签： vue.js vuejs2 vue-router bootstrap-vue

【解决方案1】：

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

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

【讨论】：