Vue routing some things in progress


Recently, I met a small pit when it was a separate project, and I would like to make a climb commemoration.

The basic scenario is that the page is jumped between the page, and jumps from the page A to the page B (after the page B is corresponding to the corresponding operation), then jump from the page B to the page C. Then return from the page C to the page B, the page B is reserved, and the page A is returned, and the page B is not retained. (.. ∀ ·) ノ゙ ノ゙ ~ I feel a mess.

In short, the forward refresh, the back is not refreshed (refreshing means re-rendering)

I believe that many small partners will think of using Keep-alive to turn the cache page to achieve, goose, cooking Exception, the following is the crawling process of the cooking.

VUE Routing Open Keep-Alive Cache page

Keep-alive is a method of cache component instance provided by VUE.

First step, first rewrite

display mode

// This is a page that is cached
 // This is a component      , in the routing configuration file, configuring the component is cached   
Routes: [{PATH: ‘/’, Name: ‘Index’, Component: Index, Meta: {Title: “Museum”, Keepalive: False // Notache }}, {path: ‘/ searchmain, name:’ searchmain, Component: searchmain, meta: {title: “Search”, Keepalive: True, // Cache}}, {Path: ‘/ CollectionDetails’, Name: ‘CollectionDetails’, Component: CollectionDetails, Meta: CollectionDetails, Meta: CollectionDetails, Meta: {Title: “Collection Details”, Keepalive: false, // No Cache}}]

No matter when, the cached component will always be cached

, according to the routing hook, change the cache component. State
  BeforouteLeave (to, from, next) {if (to.Path = "Home") {from.meta.keepalive = false;} else if (to. Path = "Details Page") {from.meta.keepalive = true;} // Jump to the home page, can't cache, jump to the details page (that is, don't refresh) Next ();} This kind of row? it's OK? it's OK? no! ! Because it is indeed successful when the first time is, it will be GG after exiting, because Keepalive has become false, and the second time will not be cached. Then the first page adds to the following code, let him enter BeforouteLeave (to, from, next) {if (to.Path == "/ searchmain) {to.meta.keepalive = true;} next (true);  
Practice has proven that the data of the search interface has always been the first cached data.

Second, in order to solve this problem, the cooking remembers two hook functions related to the Keep-Alive component.

Activated: The cached component is triggered again;

deActiVated: When the cached component is left;
When entering the Keep-Alive component for the first time, its life Cycle execution sequence:
  Beforoutenter -> Created -> mounted ...-> actid-> deactivated  

When entering the lifecycle

Beforoutenter -> Activated -> deActivated

  Second When entering, the lifecycle function of the VUE component is not executed, indicating that the cache component cannot be destroyed. Can't update.  

ActiVated () {if (! This. $ Route.meta.isback) {// If IsBack Is false, indicating that new data is needed, otherwise no longer request, directly using the cache data this.getdata (); // Ajax Get data method} // Restore to the default false, avoid IsBack has always been true, resulting in the next time Unable to get data this. $ Route.meta.isback = false},
, the data saved in the DATA is not changed, and it is still Not very thorough!
  Ultimate Solution  
The last step of the last step lasts,

is to add Key values ​​to the routing component to be cached ~

Conditions in Vuex Condition Changes to Key’s value

BeforouteLeave (to, from, next) {if (to.Path == “/”) {this. $ store.commit (“Update_Key”, this. $! == undefined? this. $ + + New Date (): this. $ route + + new date ());}}

This is a very important issue, these cached components It is all in memory. If you have been working, the memory is getting bigger and bigger, causing system carton. So when you leave, you will be destroyed

Manually trigger destruction

BeforouteLeave (to, from, next) {if (to.path == “/”) {this. $ store.commit (“Update_Key”, this. $! == undefined? this. $ + + new date (): this. $ 0.TROY (); // destroy bar}
    Conclusion: Written, I hope to be available for everyone!   Summary    The above is the full content of this article, hopeThis article has a certain reference value for everyone's learning or work, thank you for your support of TUMI cloud. 
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment