Recently, the product put forward a demand for page caching function. When I received this demand, the first thing I thought of was to use keep-alive to realize it. In the process, I stepped on many pits and encountered many problems; I recorded the problems I encountered and the corresponding solutions.
Solution 1: Use keep-alive to cache page components
......
<keep-alive :include="cachedViews">
<router-view :key="key" />
</keep-alive>
export default {
computed: {
cachedViews() {
return this.$store.state.tagsView.cachedViews
},
key() {
return this.$route.path
},
}
}
This solution is to put the menu page in the cache, but it encounters a problem: jumping from page A to page B, the data of page B is rendered by passing parameters from page A, and it will always be kept when it comes in for the nth time State of first entry. Because our background management system uses dynamic routing, it needs the cooperation of the backend to complete. What I think of is to add a configuration item to the menu to configure whether to add cache to each menu page, so that we can distinguish whether those menus need to be cached or not. But the backend disagrees with doing this, and thinks that as long as the frontend handles it by itself. And when the page is switched, the previous data is still not the latest data. Later, I wonder if I can re-call the mounted hook function of each subpage to re-call the list interface.
Solution 2: keep-alive + hook method to call the mounted subpage
......
<keep-alive :include="cachedViews">
<router-view :key="key" ref="viewPage" @hook:activated="routerActivated" />
</keep-alive>
.....
export default {
watch: {
$route(val) {
// 判断在进入页面的时候，页面是不是缓存状态，即 加入缓存列表之前，是不是就已经是缓存了
this.judgeActivated(val)
},
},
methods: {
// 重新进入缓存页面 activated阶段重新走mounted
routerActivated() {
// 非缓历史存页面，直接return，否则会执行两边mounted
if (!this.cachedPage) return
// 子页面vue实例
const vm = this.$refs.viewPage
const createdCrudHandlers = vm.$options['mounted']
if (createdCrudHandlers) {
for (let i = 0, j = createdCrudHandlers.length; i < j; i++) {
createdCrudHandlers[i].call(vm)
}
}
},
// 判断页面是否启用页面钩子
judgeActivated(view) {
this.cachedPage = this.cachedViews.includes(view.name)
},
}
This is to cache each page and then re-call the mounted page of each page. Due to historical reasons, our system has various specifications for you to do this.
Solution 3: vuex cache search conditions
Create a cache condition js file under the store
/**
* 缓存页面搜索条件
* **/
const state = {
cachedRoutes: {
}
}
const mutations = {
SET_CACHED_ROUTES: (state, route) => {
const {
name, query } = route
state.cachedRoutes[name] = query
},
DELETE_CACHED_ROUTES: (state, route) => {
const {
name } = route
delete state.cachedRoutes[name]
}
}
const actions = {
setCachedRoutes({
commit }, route) {
commit('SET_CACHED_ROUTES', route)
},
delCachedRoutes({
commit }, route) {
commit('DELETE_CACHED_ROUTES', route)
}
}
export default {
namespaced: true,
state,
mutations,
actions,
}
// src/mixins/index.js
import {
mapActions, mapGetters } from 'vuex'
gettter.js
const getters = {
...
cachedRoutes: state => state.routerCache.cachedRoutes,
}
export default getters
src/mixins/index.js
import {
mapActions, mapGetters } from 'vuex'
...
computed: {
...mapGetters(['cachedRoutes']),
},
methods: {
...mapActions(['setCachedRoutes']),
/**
* 设置路由缓存相关配置
* @param: queryKey 页面搜索表单对象的key
*/
setSearchQuery(queryKey) {
const name = this.$route.name
if (typeof this.setCachedRoutes === 'function') {
this.$store.dispatch('routerCache/setCachedRoutes', {
name: name, query: JSON.stringify(this[queryKey]) })
}
},
/**
* 获取路由缓存相关配置
* @param: queryKey 页面搜索表单对象的key
*/
getSearchQuery(queryKey) {
// 如果使用 路由 的 name属性缓存的话，这里就取当前页面路由的 name值，如果使用了 path 缓存替换即可
const name = this.$route.name
const cachedRoutes = this.cachedRoutes || {
}
if (cachedRoutes.hasOwnProperty(name)) {
const target = JSON.parse(cachedRoutes[name])
this[queryKey] = Object.assign({
}, target)
}
}
}
This needs to call the setSearchQuery and getSearchQuery methods in the page that needs to be cached to store and retrieve data respectively