The vue-router

vue's way of doing SPA navigation

Getting started

Dynamic routes

Programatic navigation

Named routes

Named views

props & route components

Navigation guards

Navigation guards provided by vue-router are primarily used to guard navigations either by redirecting it or canceling it. There are a number of ways to hook into the route navigation process: globally, per-route, or in-component.

Params or query changes won't trigger enter/leave navigation guards. You can either watch the $route object to react to those changes, or use the beforeRouteUpdate in-component guard.

Global Guards

• to: Route: the target Route Object being navigated to.

• from: Route: the current route being navigated away from.

• next: Function: this function must be called to resolve the hook. 

next(), next(false),next('/'), next({ path: '/' }), next(error)(transfer to router.onError())

Per-Route Guard

In-Component Guards

Data fetching

Fetching After Navigation: perform the navigation first, and fetch data in the incoming component's lifecycle hook. 

Fetching Before Navigation: Fetch data before navigation in the route enter guard, and perform the navigation after data has been fetched.

Fetching After Navigation

Fetching Before Navigation

Lazy loading routes