Is there a way to show a bootstrap-vue $toast feedback in beforeRouteEnter?

Viewed 767

I have a component which loads a single user, so I use a vue-router guard to load data and in case of error redirect back to the users list component.

Is there a way to show a vue-bootstrap $toast? Usually I access $toast from this component, but obviously this does not exists yet in beforeRouteEnter.

I know I could manage in other ways (show the error in the page and use created(), or use vuex to keep the error and show it in the next page), but since I am using $toast everywhere I would like to keep consistency.

I have no ideas... if only I could access the root component I would have access to $toast but I can't see a way.

// 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 Answers

You don't have access to this inside beforeRouteEnter. So you can do below :

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