VueRouter Basic tutorial series 🎉

Navigation results

All possible results of routing navigation are as follows:

  • Jump to the target page correctly
  • Predictable failures
    • Navigation interrupted
    • Navigation cancelled
    • You are already on the target page you want to navigate to
  • Unpredictable failure
    • Thrown in the navigation guardError.
  • Redirection occurs

Predictable failure

Both declarative navigation and imperative navigation realize route jump by command.

The imperative navigation method push or replace returns a Promise in the event of a route failure. The Promise resolution value is an Error instance with additional attributes that make it easy to determine the type of failure.

If an undefine is returned, the navigation has been successfully confirmed.

To help determine the type of failure, VueRouter also provided us with two auxiliary tools:

  • NavigationFailureType: Enumerated value of the failure type.
  • IsNavigationFailure (failure[, NavigationFailureType]) : Check whether there is a specified failure, the second parameter can be omitted, only check whether there is a route failure.

NavigationFailureType:

export declare enum NavigationFailureType {
    /** * An aborted navigation is a navigation that failed because a navigation * guard returned `false` or called `next(false)` */
    aborted = 4./** * A cancelled navigation is a navigation that failed because a more recent * navigation finished started (not necessarily finished). */
    cancelled = 8./** * A duplicated navigation is a navigation that failed because it was * initiated while already being at the exact same location. */
    duplicated = 16
}
Copy the code

Details:

NavigationFailureType instructions
aborted Return in navigation guardfalseThe navigation was interrupted.
cancelled A new navigation is created before the current navigation is complete. For example, it is called again while waiting for the navigation guardrouter.push.
duplicated Navigation is blocked because we’re already in target position.

Detect navigation faults

{
   async navigation() {
        const failure = vm.$router.push("/about");
        if (failure) {
          // Navigation failed
          // The assistant tool failed to check the navigation
          isNavigationFailure(failure);
          // The auxiliary tool checks the cause of the navigation failure
          isNavigationFailure(failure, NavigationFailureType.aborted);
        } else {
          // Navigation succeeded}}}Copy the code

detectioncancelledThe fault

import { isNavigationFailure, NavigationFailureType } from "vue-router";
//....

{
    async navigation() {
        vm.$router.push("/about").then((failure) = > {
          if (failure) {
            console.log(
              isNavigationFailure(failure, NavigationFailureType.cancelled) //true); }}); vm.$router.push("/test"); }}Copy the code

Unpredictable failure

The navigation guard threw an Error.

Checking redirection

Scenarios that trigger redirection:

  • Used in route configurationredirectConfiguration items.
  • Used in navigation guardnextJump to a new location.

The redirect overwrites the ongoing navigation. Unlike other return values, redirection does not block navigation, but creates a new navigation. Therefore, the redirectedFrom property in the routing address can be read to determine whether there is a redirection:

await router.push('/my-profile')
if (router.currentRoute.value.redirectedFrom) {
  // redirectedFrom is the resolved routing address, like to and from in the navigation guard
}
Copy the code

You can also read redirectedFrom from the $Route object