This is the 31st day of my participation in the August Text Challenge.More challenges in August

In this article we will look at Router methods, which we use a lot and need to know how to use them.

The Router method

Routing, add or delete

addRoute

Add a new route record as a child route of an existing route. If a route has a name and already has a route with the same name, it deletes the previous route first.

Let’s create a route instance:

const router = createRouter({
    history: createWebHashHistory(),
    routes,
    linkActiveClass: "Laughing"
})
Copy the code

The addRoute is used as follows:

const route={ path: '/about'.name: 'about'.component: () = > import('.. /views/About.vue') }
router.addRoute(route)
Copy the code

Note that if the route name is repeated, the previous route will be overwritten.

Of course, we can also add nested routines to existing routes as follows:

router.addRoute('home',route)
Copy the code

removeRoute

By analogy with addRoute, this method deletes an existing route by name. The name of the route is used as the first parameter.

router.removeRoute('about')
Copy the code

The code above removes the route name===about.

Navigation guard

beforeEach

Adds a navigation guard that is executed before any navigation, also known as the front guard. Returns a function to delete the registered guard as follows:

router.beforeEach(guard= >{
    console.log(guard);
})
Copy the code

Of course we can also use it like this:

router.beforeEach((to, from, failure) = > {
    console.log(to, from, failure)
})
Copy the code

To is the route to the destination, from is the last route, and failure indicates whether there is a failure. We can do a few things based on registered guards.

afterEach

Add a navigation hook that executes after each navigation, also known as a rear guard. Returns a function that removes the registered hook, analogous to using beforeEach.

beforeResolve

Add a navigation guard, executed just before the navigation is about to be parsed. In this state, all components have been retrieved and other navigators have succeeded. Returns a function to delete the registered guard as follows:

router.beforeResolve((to, from) = > {
    console.log(to, from)})Copy the code

Other operating

go

Allows you to move forward or backward in history. A parameter of type Number, relative to the historical position you want to move to on the current page, as follows:

router.go(1)
Copy the code

back

If possible, retrace history by calling history.back(). Equivalent to router.go(-1).

forward

If possible, advance through history by calling history.forward(). Equivalent to router. Go (1).

getRoutes

To get a complete list of all routing records, use:

router.getRoutes()
Copy the code

hasRoute

To check whether a route with the specified name exists, run the following command:

router.hasRoute('home')  //true
Copy the code

isReady

When the router completes the initial navigation, it returns a Promise, which means it has resolved all the asynchronous input hooks and asynchronous components associated with the initial route. , use as follows:

router.isReady()  //Promise
Copy the code

onError

Add an error handler that is called every time an uncaught error occurs during navigation. There are some things we can do when routing is wrong, using the following:

router.onError((error,to,from) = >{
    console.log(error,to,from)})Copy the code

push

Navigate programmatically to a new URL by pushing an entry in the history stack. It can be interpreted as the route switching method, which is as follows:

router.push('/home') or router. Push ({path: '/home'}) or the router. Push ({name: 'home'})
Copy the code

replace

Navigate programmatically to a new URL by replacing the current entry in the history stack. It is essentially a switching route, using a method similar to push.

resolve

Returns the normalized version of the routing address. It also includes an href attribute containing any existing base. The usage method is as follows:

router.resolve('/home')
Copy the code

conclusion

1. In real development, we usually use navigators for permission management or special operations.

2. In practice, the API we use most often is push, so you should master it and use it according to your needs.

For more articles, the portal has opened: Look back at the Vue3 catalogue!