introduce
Keep-alive is a built-in component of VUE. It caches inactive component instances rather than destroying them directly, and it is an abstract component that is not rendered into the real DOM and does not appear in the parent component chain. It provides include and exclude attributes that allow components to cache conditionally, where exclude takes precedence over include and Max can cache as many component instances as possible.
Keep-alive details document
Using keep-alive adds two hook functions, activated and deactivated
In the following article, I use keep-alive together with vue-router. Currently, keep-Alive can also cache individual components, so I won’t go into details here.
Include and exclude
Include and Exclude Prop allow components to cache conditionally. Both can represent detailed health documents with comma-delimited strings, regular expressions, or an array
I use vuEX here with array dynamic control
<keep-alive :include="includes" exclude="" :max="10" >
<router-view/>
</keep-alive>
<script>
export default {
computed: {
includes() {
return state= > state.router.includes
}
},
methods: {
changeStoreIncludes() {
this.$store.commit('changeIncludes'.'tableLists'); }}}</script>
// vuex
mutations: {
changeIncludes(state, payload) {
state.includes = payload
}
}
Copy the codeInclude and exclude are invalid
To use the include/exclude attribute, you need to assign all vue class names (not route names). Otherwise, include/exclude does not take effect
export default {
name:'TableList'.// Include or exclude specifies the name to be used
data () {
return{}}},Copy the codeUse v-if directly to differentiate
<transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
<keep-alive>
<router-view v-if="$route.meta.keepAlive">
</router-view>
</keep-alive>
</transition>
<transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
<router-view v-if=! "" $route.meta.keepAlive">
</router-view>
</transition>
Copy the codeDo so much more simple and clear, and cooperate with animation works better, no longer vue component declarations inside the name, but in the route of meta add {keepAlive: true} fields, if routing control is the background, the front-end debugging is chicken ribs.
Exposed problem
Question 1:
Public location problem. When the current list page jumps to the details page, the route back to the list will also appear public location. (If you use the browser’s fallback mode, the location is not common.)
For this position of the public situation, I am confused, look forward to big guy answer 🤝, there are a few points to say I do not know right or wrong, to be verified.
- Multiple page
- If there is a data request, the browser will put the page at the top, right?
- If it’s a static page, the browser will scroll to where you were before, right?
- The above is just the jump behavior of the browser in use. If you use href or route to encapsulate some methods, then all of them will be at the top. Okay?
- Verify above 🤝
- Based on SPA model development, so there is only one page, the page switching is using hash mapping relationship with the component, the vue – is the router through the hash to simulate the full url, but is still a url for the page, so in any component scrolling page, switch to the other components, page remain before rolling state, That’s what happens when places are common.
Question 2:
Add three pages A, B and C, I now only want A->B when A cache, then B->A, show the cache page, C->A, A->B->C->A and so on do not cache.
scrollBehavior
My idea for question 1 was to cache the scrolling height directly before a jump and then reassign the height to it every time I came back, but it would be a bit troublesome if I had to use the cache if I had too many pages, and then I found that routing provided a way to do this.
Description of scrollBehavior
The scrollBehavior method receives to and FROM routing objects. The third parameter savedPosition is available if and only if popState navigation (triggered by the browser’s forward/back buttons).
const router = new VueRouter({
mode: 'hash',
routes,
scrollBehavior(to, from, savedPosition) {
// This method checks document.body by default. If you have a custom scroll box, there is no way to control your scroll height
console.log(savedPosition);
// If a falsy(not false) or an empty object is returned, no scrolling will occur. In other words, this method is useless and will not be at the top of the page
https://developer.mozilla.org/zh-CN/docs/Glossary/Falsy / / falsy document
if (savedPosition) {
return savedPosition
} else {
if (from.meta.keepAlive) {
// This is not accurate, maybe my page scroll box is not the body,vue should have a setting place
from.meta.scrollTop = document.documentElement.scrollTop;
}
return {x: 0.y: to.meta.scrollTop || 0}}}});export default router
// The new version supports asynchronous scrolling, which returns a Promise. This is particularly useful because the previous approach would not be able to override asynchronous requests on the page
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return new Promise((resolve, reject) = > {
setTimeout(() = > {
resolve(savedPosition)
}, 20)})}else {
if (from.meta.keepAlive) {
from.meta.scrollTop = document.documentElement.scrollTop;
}
return {x: 0.y: to.meta.scrollTop || 0}}}Copy the codeAchieve return not refresh, other menu into refresh
Implementation Method 1
// app.vue
<keep-alive>
<router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if=! "" $route.meta.keepAlive" />
Copy the code// router.js
{
path: '/table-list'.name: 'table-list'.component: TableList,
meta: {keepAlive: true} // Add this
},
{
path: '/table-detail'.name: 'table-detail'.component: () = > import('.. /views/table-detail.vue'),}Copy the codeBoth approaches one and two are based on the two code snippets above.
Add the following code to the list page you want to cache
activated() {
// If it is the first time to enter, do not execute the following function.
if (this.hasFirst) return
this.queryList()
},
beforeRouteLeave(to, from, next) {
if (to.name === 'table-detail') {
if (!from.meta.keepAlive) {
from.meta.keepAlive = true; }}else {
from.meta.keepAlive = false;
this.$destroy(); // Destroy the instance of the class page table page, with a pit
}
next()
}
Copy the codeAfter completing the above code, A->B->A is fine, and then when A->C->A->B->A finds that list page A is no longer cached, it is A new page every time. Google’s approach is to force a cached page refresh if it is not the first time you enter. This.$destroy() can no longer cache the component after calling distory and will repeatedly generate multiple virtual DOM after entering the page.
To continue, use router.aftereach ((to,from)=>{}) in main.js
// If the page does not come from the detail page, it must be refreshed, otherwise it cannot be cached
router.afterEach((to, from) = > {
// If the current page is refreshed or the details come in, the following code is executed to prevent the cache from being unable to be cached by executing the destruction method
if (from.name && from.name ! = ='table-detail' && to.name === 'table-list') {
let isRefresh = sessionStorage.getItem('isRefresh')
if (isRefresh === '0') {
setTimeout(() = > {// It must be asynchronous, or it cannot jump
window.location.reload()
})
sessionStorage.setItem('isRefresh'.null)}else {
sessionStorage.setItem('isRefresh'.'0')}}else if (from.name === 'table-list' && to.name === 'table-detail') {
sessionStorage.setItem('isRefresh'.null)}else {
sessionStorage.setItem('isRefresh'.'0')}})Copy the codeI don’t know why all the solutions from Google are refreshed in the details page. The problem is that there is no caching function when the user jumps to the details page for the first time and then returns to the list page. The second time will be normal, but the customer is likely to perform this operation.
This solution is primitive, the user experience is poor, and the need to cache multiple pages is difficult to control, so it is not recommended
Implementation Method 2
Inspired by method one, I can simulate a page refresh in other ways.
<template> <! -- Be sure to use v- hereifThe upside is that you can get a better experience with $nextTick. The flip side is that after using V-show, it basically hides the page, but if there's some DOM in there that doesn't diff, it shows up, and the simulated refresh experience isn't very good. For example, use input-><div v-if="isRouterAlive">
<div>{{ddd}}</div>
<input v-model="ddd" type="text" />
<table-list ref="table" :multiple="true" :otherTableParams="otherTableParams" :tableColumn="column"/>
</div>
</template>
<script>
export default {
// Other codes........
activated() {
if (this.$route.meta.isRefresh) { // If not jump to the details page
const resetData = this.$options.data() // Get the data from the original data
delete resetData.column JumpEdit {cb: this.undefined} {cb: this.undefined} {cb: this
Object.assign(this.$data, resetData) / / reset the data
this.isRouterAlive = false // Do not display the current page through v-if
this.$nextTick(function () {
window.scroll(0.0) // page top, do not use the timer below, there is a sense of frustration
this.isRouterAlive = true // Use v-if to display the current page
})
setTimeout(() = > {
this.queryList() // Get data asynchronously, related to my project component, you can get data directly above OK})}},beforeRouteLeave(to, from, next) {
// If the page is not loaded into the detail page, display true to indicate that the page is reloaded
from.meta.isRefresh = to.name ! = ='table-detail';
next() // There is no jump without adding a route}}</script>
Copy the codeTo optimize the
There are two problems with the current code: one is that from the detail page to the list page, the data doesn’t update, and if I change something in the detail page, then it will lag when I get to the list page; Second, jump from the details page to another list page and then jump to the cached list page, then it will cache the previous data, does not update the current page, optimize as follows:
activated() {
// If the following method is not executed for the first time, the data will be requested twice
// this. HasFirst generates a variable instead of a reactive one
if (this.hasFirst) return
if (this.$route.meta.isRefresh) {
const data = this.$options.data()
delete data.column
Object.assign(this.$data, data)
this.isRouterAlive = false
this.$nextTick(function () {
window.scroll(0.0)
this.isRouterAlive = true
})
setTimeout(() = > {
this.queryList()
})
} else if (this.$route.meta.isRefresh === false) {
// this.$route.meta. IsRefresh = {this.$route.meta. IsRefresh = {this
this.queryList()
}
}
beforeRouteEnter(to, from, next) {
// This route guard function is executed first
to.meta.isRefresh = from.name && from.name ! = ='table-detail';
next()
},
// The following code can be annotated
// beforeRouteLeave(to, from, next) {
// from.meta.isRefresh = to.name ! == 'table-detail';
// next()
// }
Copy the codeFinally, you can extract the code into a mixins and write a refreshed component that can be used and removed, or read this article.
Implementation Method 3
The include and exclude provided by keep-alive are then dynamically controlled with VUEX.
Route entry page
// app.vue
<keep-alive :include='includes' :exclude=' ':max="3">
<router-view></router-view>
</keep-alive>
Copy the codeInclude, exclude, and Max represent the maximum number of caches.
// Get vuex data
import {mapGetters} from 'vuex'
export default {
computed: {// Dynamic monitoring in computed. mapGetters(['includes']),},methods: {
changeStore() {
// Change vUE data, which is not used here
this.$store.commit('change'.'tableLists')}}}Copy the codeVuex
const keepalive = {
state: {
includes: ['tableLists']},mutations: {
change(state, payload) {
state.includes = payload
},
},
getters: {
includes(state) {
return state.includes
}
}
};
export default keepalive
Copy the codePartial code for the list page
activated() {
// Same as above, do not execute the following method if it is first entered
if (this.hasFirst) return
this.queryList()
},
beforeRouteEnter(to, from, next) {
/ / this time there is not this, so here is not operating vuex with this words, I am in the main, js assigned to the window
window._store.commit('change'['tableLists']);
next()
// You can also use it this way
// next((el) => {
// el.$store.commit('change', ['tableLists']);
// })
},
beforeRouteLeave(to, from, next) {
if(to.name ! = ='table-detail') {
// If not jump to details page, pass an empty array, this cannot use "" default is all cache
this.$store.commit('change'[]); } next() }Copy the codeDetails page part of the code
beforeRouteLeave(to, from, next) {
if(to.name ! = ='table-list') {
this.$store.commit('change'[]); } next() }Copy the codeRouting page
Since includes does not define keepalive in the route, the scrollBehavior method above requires extra handling when using a composite event jump
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return new Promise((resolve) = > {
setTimeout(() = > {
resolve(savedPosition)
}, 20)})}else {
const ary = ['Invest'.'Store']; // This is the route name of the page to be cached, not the name of the vue class
if (ary.includes(from.name)) {
/ * a recent review time Found a problem * if the list page jump to the details page, when this time is already in the details page, * if when the height of the current page details page didn't list page jump came in the height of the rolling high, this time will get no real page height, * The solution is to get the height of the page before each page leaves and save it in the meta. This can solve this problem and also solve the problem of not getting the height of the page when it is not the body scrolling. * /
from.meta.scrollTop = document.documentElement.scrollTop;
}
return {x: 0.y: to.meta.scrollTop || 0}}}Copy the codeThe above code is trivial and needs to be added to every page, so in the actual project you can add a Keepalive mixins for easy management.
Note that using include and exclude
- Add {name:xx} inside each component
- If include is set to empty, every page will be cached
- Exclude takes precedence over include
It is the first time to publish an article in my life. I hope you can give me more advice.
Reference documentation
keep-alive
vueRouterIssues
scrollBehavior
Navigation guard