How to remove next()?

[steven-twerdochlib]

I see next() will be getting deprecated at some point in the near future so I want to get rid of it but I don't understand how.
Here's an example of how I use next:

beforeRouteEnter(to, from, next) {
    next((vm: any) => {
      if (!vm.isRememberExpandedRoute(from.name)) {
        vm.$store.commit('clearExpanded');
      }
    });
  },

isRememberExpandedRoute is a method in the current class.

[yudin-s]

For this specific guard, you probably should not remove next() unless you also move the logic somewhere else.

Vue Router 4 deprecated the general “call next manually in every guard” style for most guards, but beforeRouteEnter is the special case. The official docs still document next(vm => ...) there because the entering component instance does not exist yet when the guard runs. The callback is run only after navigation is confirmed and the component instance is available.

So your current shape is still the correct instance-based form:

beforeRouteEnter(to, from, next) {
  next((vm: any) => {
    if (!vm.isRememberExpandedRoute(from.name)) {
      vm.$store.commit("clearExpanded");
    }
  });
}

If you really want to remove next, you need to remove the dependency on the component instance. For example, extract isRememberExpandedRoute into a plain helper or use route meta, and import/use the store directly from outside the component:

beforeRouteEnter(to, from) {
  if (!isRememberExpandedRouteName(from.name)) {
    store.commit("clearExpanded");
  }
}

But you cannot simply rewrite this as:

beforeRouteEnter(to, from) {
  this.isRememberExpandedRoute(...)
}

because beforeRouteEnter has no this. beforeRouteUpdate and beforeRouteLeave can use this; beforeRouteEnter cannot.

So the decision rule is: keep next(vm => ...) if you need the entered component instance; remove it only if the guard can be expressed with imported store/helpers, route meta, or logic that runs after the component is mounted.

If this clarifies the migration path, please mark it as answered so others know that beforeRouteEnter is the exception.

[steven-twerdochlib]

Thanks for the quick response, I'll leave next alone in beforeRouteEnter() for now as long as it doesn't give warning messages.
I do have another scenario I just found which is a bit confusing where I emit the next, how would you resolve this?

  beforeRouteLeave(from, to, next) {
    if (from.name === 'Test1' || from.name === 'Test2') {
      if (Test3('Test4')) {
        this.$root.emitter.emit('Test6', { next: next });
      } else {
        next();
      }
    } else {
      next();
    }
  },

and it appears to be used here:

setupShowUnsavedNotesModel() {
      this.$root.emitter.on('Test6', (payload: any) => {
        this.Test6= true;
        this.nextStep = payload.next;
        this.nextStepPayload = payload.name;
      });
    },
continueWithOrWithoutSavingNotes(saveClearNotes: string) {
      this.Test6 = false;
      if (typeof this.nextStep === 'string') {
        if (this.nextStep === 'logout') {
          this.logout();
        } else if (this.nextStep === 'routePush') {
          this.$router.push(this.nextStepPayload);
        }
      } else {
        this.nextStep();
      }
    },

[yudin-s]

I would avoid carrying next through the event bus here. In Vue Router 4, the leave guard can wait for your modal directly, so the event bus only needs to open the modal and later resolve the guard.

Two details matter here:

1. The argument order is beforeRouteLeave(to, from), not from, to. If your code is checking the route being left, that is from.name; if you meant the destination route, use to.name.
2. beforeRouteLeave already has access to this, and in Vue Router 4 it can return a value or a Promise. So the modal can resolve the navigation instead of storing/calling next.

The shape I would use is:

beforeRouteLeave(to, from) {
  if (
    (from.name === "Test1" || from.name === "Test2") &&
    Test3("Test4")
  ) {
    return new Promise(resolve => {
      this.$root.emitter.emit("Test6", {
        resolve,
      });
    });
  }
}

Then the modal/handler decides the navigation result:

setupShowUnsavedNotesModel() {
  this.$root.emitter.on("Test6", payload => {
    this.Test6 = true;
    this.pendingRouteResolve = payload.resolve;
  });
},

continueWithOrWithoutSavingNotes(saveClearNotes: string) {
  this.Test6 = false;

  const resolve = this.pendingRouteResolve;
  this.pendingRouteResolve = undefined;

  if (!resolve) return;

  if (saveClearNotes === "cancel") {
    resolve(false); // stay on the page
  } else if (saveClearNotes === "logout") {
    resolve({ name: "logout" }); // or whatever route you actually use
  } else {
    resolve(true); // allow the original navigation
  }
}

The important part is that the guard owns the navigation decision. The modal only resolves it with true, false, or a route location. That avoids keeping a raw next callback around and avoids mixing a pending navigation with a separate $router.push().

One caveat: make sure every modal path eventually calls resolve(...). If it never resolves, the navigation stays pending.

If that matches your two leave-guard cases, you can mark the answer so the next person looking for the Vue Router 4 pattern finds it faster.