Registered Vue – the Router

Dynamic Route Matching

When a route changes from /user/foo to /user/bar, the same route will be matched and the original component will be reused, meaning that the component's declaration cycle hook will not be called. The change of response route parameters is shown as follows:Copy the code

When a wildcard is used,$route.params automatically adds a parameter named pathMatch to the part of the attribute that is matched by the wildcard.Copy the code

Embedded routines by

Programmatic routing navigation

this.$router.push();
this.$router.replace();
this.$router.go();
Copy the code

After routing

Named view

Redirects and aliases

Route component parameters are transmitted

Navigation guard

Navigation guard is mainly used to guard navigation by jumping or canceling. Navigation guard includes global navigation guard, route navigation guard and component navigation guardCopy the code

Global navigation guard

Global front-guard beforeEach, global parse guard beforeResolve, global afterEachCopy the code

Route exclusive guard

beforeEnter
Copy the code

Component navigation guard

BeforeRouteEnter, beforeRouteUpdate, beforeRouteLeaveCopy the code

Route navigation parsing flow in different situations

Test code:

The page is displayed for the first time and no route is matched

// 全局前置路由守卫 beforeEach();
// 全局解析路由守卫 beforeResolve();
// 全局后置路由守卫 afterEach()
Copy the code

Click on Foo to jump to/Foo

// Global front-guard beforeEach(); // Route exclusive guard beforeEnter(); / / component beforeRouteEnter (); // beforeResolve(); // afterEach();Copy the code

Click User1 to jump from /foo to /user/1

/ / component beforeRouteLeave (); // Global front-routing guard beforeEach(); // Route exclusive guard beforeEnter(); / / component beforeRouteEnter (); // beforeResolve(); AfterEach ();Copy the code

Click User2 to jump from /user/1 to /user/2

Keep in mind that changes in parameters or queries do not trigger entry/exit navigators (beforeRouteLeave, beforeEnter, beforeRouteEnter). You can respond to these changes by observing the $Route object, or by using the component guard of beforeRouteUpdate.

// Global front-routing beforeEach(); / / component beforeRouteUpdate (); BeforeResolve (); AfterEach ();Copy the code

Complete navigation parsing process

Routing meta information

Transition dynamic effect

Data acquisition

BeforeRouteEnter (), beforeRouteUpdate() before navigation is complete.Copy the code

Scrolling behavior

Route lazy loading

Router Build options

routes:

mode:

Support for all JavaScript allows context history: relies on the HTML History APICopy the code

base:

Application base path: Default value "/"Copy the code

linkActiveClass:

Global <router-link> Default active class, default "router-link-exact-active"Copy the code

scrollBehavior:

/ / rollingCopy the code

parseQuery / stringfyQuery:

// 
Copy the code

fallback:

// 
Copy the code

Router instance attributes:

Router instance methods:

Route Attributes of the routing object: