Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "what is the routing guard of vue and the life cycle after keep-alive". The content is detailed, the steps are clear, and the details are handled properly. I hope that this article "what is the routing guard of vue and the life cycle after keep-alive" can help you solve your doubts.

Vue-Router lazy load

1. Arrow function + import

Const List = () = > import ('@ / components/list.vue') const router = new VueRouter ({routes: [{path:'/ list', component: List}]})

2. Arrow function + require

Const router = new Router ({routes: [{path:'/ list', component: resolve = > require (['@ / components/list'], resolve)}]}) how to define dynamic routing param mode

Configure routing format: / router/:id

How to pass it: follow the path with the corresponding value

Path formed after delivery: / router/123

Route definition

/ / users in APP.vue / / in index.js {path:'/ user/:userid', component: User,}

Route hopping

/ / method 1: button / / method 2:this.$router.push ({name:'users',params: {myname:jake}}) / method 3:this.$router.push// method 1: button / / method 2:this.$router.push ({name:'users',params: {myname:jake}}) / / method 3:this.$router.push ('/ user/' + jake)

Parameter acquisition: get the passed value through $route.params.userid.

Query mode

Configure the routing format: / router, that is, the normal configuration.

Delivery method: the key of query is used as the delivery method in the object.

The path formed after delivery: / route?id=123.

Route definition

/ / Mode 1: file as an object directly on the router-link tag / / Mode 2: write a button in the form of a click event my profileClick () {this.$router.push ({path: "/ profile", query: {name: "kobi", age: "28", height: 198}});}

Jump method

/ / method 1: button / / method 2:this.$router.push ({name: 'users', query: {uname:james}}) / method 3: button / / method 4:this.$router.push ({path:' / user', query: {uname:james}}) / / method 5:this.$router.push ('/ user?uname=' + jsmes)

Get parameter: get the passed value through $route.query

Vue-Router navigation guard

Sometimes, some operations need to be done through routing, such as the most common login permission verification, when the user is allowed to enter the navigation when the conditions are met, otherwise, cancel the jump and jump to the login page to log in. There are many ways to embed the routing navigation process: global, exclusive to a single route, or at the component level.

Global routing hook

There are three guards in the global vue-router:

Before the router.beforeEach global front guard enters the route.

The router.beforeResolve global resolution guard is called after the beforeRouteEnter call.

After the router.afterEach global rear hook enters the route.

The three parameters to, from and next:

To and from are the routing objects that are about to enter and leave, and the routing objects refer to the routing objects that are usually obtained through this.$route. The parameter next:Function is a function and must be called, otherwise you cannot enter the route (the page is blank).

Next () enters the route.

Next (false): cancels the inbound route and resets the url address to the from routing address (that is, the routing address to be left).

Router.beforeEach

Router.beforeEach is the global front guard, before entering the route.

Router.beforeEach ((to, from, next) = > {let ifInfo = Vue.prototype.$common.getSession ('userData'); / / Storage information if (! ifInfo) {/ / sessionStorage does not store user information if (to.path = =' /') {/ / if it is the login page path, just next () next () } else {/ / otherwise jump to login Message.warning ("Please log in again!") ; _ window.location.href = Vue.prototype.$loginUrl;}} else {return next ();}}) routing exclusive guard

If you don't want to configure guards globally, you can configure guards separately for some routes:

Const router = new VueRouter ({routes: [{path:'/ home', component: Home, beforeEnter: (to, from, next) = > {/ / parameter usage is the same, the call order is after the global front guard, so it will not be covered by the global guard / /.}]}) the guard beforeRouterEnter in the component

BeforeRouterEnter cannot access this because the hook is called before the component instance is created, so the component instance this cannot be obtained. You can access the component instance by passing a callback to next.

BeforeRouteEnter (to, from, next) {console.log ('called after routing exclusive guard') Next (vm = > {/ / access component instance `this` via `vm` when callback is performed after mounted,})} beforeRouteUpdate beforeRouteUpdate (to, from, next) {/ / changes the current route, but the component instance `this` can be accessed by calling when the component is reused, for example, for a path / user/:id with dynamic parameters, when you jump between / user/1 and / user/2 / / because the same user component is rendered, the component instance is reused. And this hook will be called in this case. } beforeRouteLeave

Called when navigation leaves the corresponding route for the component, and we use it to prevent the user from leaving, such as not saving the draft, or destroying the setInterval before the user leaves, preventing the timer from being called after the departure.

BeforeRouteLeave (to, from, next) {if (article save) {next (); / allow to leave or can skip to another route has talked about} else {next (false); / / cancel leaving}} the embodiment of Vue routing hooks in lifecycle functions

Complete route navigation resolution process (excluding other lifecycles):

Trigger to enter another route.

Call the component to leave the route to guard the beforeRouteLeave

Call the global front guard ∶ beforeEach

Call beforeRouteUpdate in a reused component

Call the route exclusive guard beforeEnter.

Parse the asynchronous routing component.

Call beforeRouteEnter in the routing component to be entered

Call the global parsing guard beforeResolve

Navigation confirmed.

The afterEach hook that calls the global post hook.

Triggers a DOM update (mounted).

Executes the callback function passed to next in the beforeRouteEnter guard.

Keep-alive

In the development of vue projects, most components do not need to be rendered multiple times, so vue provides a built-in component keep-alive to cache the internal state of the component to avoid re-rendering.

Document: similarly, it is an abstract component: it does not render an DOM element by itself, nor does it appear in the parent component chain.

Life cycle hook

In the components / routes included by keep-alive, there are two more life cycle hooks: activated and deactivated.

Activated

Activated is called the first time the component is rendered, and then each time the cache component is activated. After entering the cached routing / component for the first time, it is called after the mounted and before the callback function passed by the beforeRouteEnter guard to next:

BeforeMount= > other routes in (destroyed/deactivated) = > mounted= > activated enter cache component = > execute beforeRouteEnter callback

Because the component is cached, these hooks are not triggered when you enter the cached routing / component again: beforeCreate, created, beforeMount, mounted.

So the timing of the subsequent call is:

Component destroys destroyed/ or leaves cache deactivated = > activated enters current cache component = > execute beforeRouteEnter callback deactivated

Called when a component is deactivated (leaving routing), beforeDestroy (hook before component destruction) and destroyed (component destruction) are not called when keep-alive is used, because the component is not destroyed and is cached.

This hook can be seen as an alternative to beforeDestroy. If you cache the component and want to do something when the component is destroyed, you can put it in this hook. If you leave the route, it will be triggered in turn:

Leave the current routing hook beforeRouteLeave = > Route Front Guard beforeEach = > Global Post Hook afterEach= > deactivated leave the cache component = > activated enters the cache component (if you are also entering the cache route) / / if the leaving component does not have a cache, beforeDestroy will replace the deactivated / / if the incoming route does not have a cache, the global post hook afterEach= > destroy destroyed= > beforeCreate, etc.

So, what if I just want to cache a few of these routes / components?

Before Vue2.1.0: two keep-alive tags + v-if judgment

/ / router configure new Router ({routes: [{path:'/', name: 'home', component: Home, meta: {keepAlive: true / / need to be cached}}, {path:' /: id', name: 'edit', component: Edit Meta: {keepAlive: false / / does not need to be cached}}]})

After the Vue2.1.0 version: Vue adds two new attributes in conjunction with keep-alive to conditionally cache routes / components.

Include: matching routes / components will be cached

Exclude: matching routes / components will not be cached (high priority)

Include and exclude support three ways to conditionally cache routing: comma-separated string form, regular form, and array form. Regular and array forms must be used in v-bind form.

/ / complete sequence of triggering hooks in comma-separated form

Combining routing navigation, keep-alive, and component lifecycle hooks, the trigger sequence is assumed to be leaving from component an and entering component b for the first time

BeforeRouteLeave: the component of the routing component leaves the hook before the route, which can be unrouted to leave.

BeforeEach: routing global front guard, which can be used for login authentication, global routing loading, etc.

BeforeEnter: route exclusive guard

BeforeRouteEnter: the component of the routing component enters the pre-routing hook.

BeforeResolve: routing global resolution guard

AfterEach: routing global rear hook

BeforeCreate: component lifecycle, cannot access this.

Created: component life cycle, can access this, can not access dom.

BeforeMount: component lifecycle

Deactivated: leave cache component a, or trigger the beforeDestroy and destroyed components of a to destroy the hook.

Mounted: access / manipulate dom.

Activated: go to the cache component, to the nested subcomponent of a, if any.

Execute the beforeRouteEnter callback function next.

In fact, most lifecycle hook functions will not be used, but there are a few points we need to note:

It is best to put the 1.ajax request in the created. You can access the this at this time, and the returned data of the request can be placed in the data.

two。 The operation about dom should be placed in mounted, and accessing dom before mounted will be undefined, because the rendering is not finished yet.

3. Each time some action is required to enter or leave the component:

Do not cach

You can use created and mounted hooks when entering and beforeDestory and destroyed hooks when leaving. BeforeDestory can access this,destroyed but not this.

Cached components:

After caching the component, entering the component again will not trigger beforeCreate, created, beforeMount, mounted. If you want to do something every time you enter the component, you can put it in the hook of the activated entry cache component. Similarly: when leaving the cache component, beforeDestroy and destroyed will not be triggered, you can use the hook of deactivated leaving the cache component instead.

After reading this, the article "what is the routing Guard of vue and what is the Life cycle after keep-alive" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it before you can understand it. If you want to know more about related articles, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.