Keep-alive, include Cache in Vue

Prerequisites: A, B, C, D four pages, A is the button page (click the button to enter the B page), b is the order list page, C is the order details page, D is the fee details page

Demand: The order is A-> B-> C-> D, each time you refresh the page, D-> C-> B take the cache, but every time you have to refresh the B page from A to B, from b to C needs to refresh the C page, from C to D to refresh the D page

In Vue official documentation 2.1 above include include and Exclude attributes Allow components to cache. Here, it is mainly implemented with the incrude combined with Vuex (four page components have their own name to take effect, this Name is called A, B, C, D)

from D-> C, from C- > B, from B-> A to write a common head to return to the component, uniform use this. $ Router.go (-1) Return to previous page

App.Vue

   
export default {data () {return {}}, compute: {keEpalive () {RETURN this. $ store.getters.keepalive}}}
Import Vue from ‘Vue’Import Vuex from’ Vuex’Vue.use (Vuex) Export Default New Vuex.Store ({State: {Keepalive: []}, mutations: {set_keep_alive: (State, KEEPALIVE) => {State.keepalive = Keepalive}}, getters: {keypalive: state => state.keepalive}}

First initialization Keepalive (Set the page you want to go)
   
Export Default {name: ‘a’, methods: {ButtonClick ) {this. $ store.commit (‘set_keep_alive’, [‘b’, ‘c’, ‘d’]) this. $ router.push (‘/ b’)}}}

B.Vue This page is used to set cache and clear cache
     export default {name: 'b', beforryEnter (TO, FROM, NEXT) {NEXT (VM => {IF (from.Path.indexOf ('c')> -1) {vm. $ store.commit ('set_keep_alive ", [' b '])}} )}}, beforoutelaave (to, from, next) {if (to.Path.indexOf ('c')> -1) {$ store.commit ('set_keep_alive', ['b', 'c'])} else if (to.path.indexof ('a')> -1) {this. $ store.commit ('set_keep_alive " , [])} NEXT ()}} 

PS: Vue Keep-Alive Include Invalid
  Check version    
Determines the current VUE version of 2.1+
because include and exclude is Vue2.1.0 New two properties.

“Vue”: “^ 2.5.2”,


Check Name

Note that not the name in the router.js, but a Name attribute in a single VUE component.

It is recommended to keep the Name and Vue components in Router.js, do not confuse.

Export Default {Name: “index”}
   
Multi-storey nested

The answer on the Internet is almost all Name properties of the VUE component, but there is still a giant pit.
That is multi-stage nested

, but there are more than two Router-ViEW is a father and child level relationship, please add Keep-alive, just add one will not take effect.

// app.Vue

 //}   
The above is the full content of this article, I hope to have a study to everyone. Help, I hope everyone will support Tumi Clouds.

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment