另一种 Vue 中 keep-alive 控制方法

另一种方法

一般都是通过控制 router 配置中的 meta 信息实现。这种方法通过控制 exclude 的值，动态的控制 keep-alive 中的缓存。

hook

使用 hook 的形式，使逻辑更集中

// useKeepAlive/*** 默认所有添加到配置中的 route 都需要 keep-alive，其 componentName 都会包括到 include 中* 通过控制 exclude 的值，动态的控制 keep-alive 中的缓存* 其原理和 meta 是相同的，这种写法不需要到 router 配置中添加额外的信息*** 配置 keepAliveConfig 控制哪些页面需要 keep-alive* keepAliveRouteName：需要 keep-alive 的路由名称* keepAliveToRouteNameArr：当前 keep-alive 的路由 to 哪些路由不会清理掉，当前 keep-alive 路由的缓存* componentName：需要 keep-alive 组件的 name* ** noKeepAlive：在 router 跳转时，params 信息中添加  noKeepAlive 可以不加载需要跳转页面的 keep-alive 缓存**/import { ref } from '@vue/composition-api'const keepAliveConfig = [// Swagger{keepAliveRouteName: 'swagger',keepAliveFromRouteNameArr: ['cmsAppDetail'],componentName: 'Swagger'}
]export const include = ref(keepAliveConfig.map(el => el.componentName))
export const exclude = ref([])
export const maxKeepAlive = ref(5)function handleExclude(keepAliveObj) {// 清除掉 keep alive 缓存exclude.value = [keepAliveObj.componentName]// 继续添加缓存setTimeout(() => {exclude.value = []}, 100)
}export function keepAliveController(to, from) {const fromKeepAliveObj = keepAliveConfig.find(el => el.keepAliveRouteName === from.name)const toKeepAliveObj = keepAliveConfig.find(el => el.keepAliveRouteName === to.name)// when other to keep-alive route// route params 信息中带 noKeepAlive 时，无缓存跳转if (to.params && to.params.noKeepAlive) {handleExclude(toKeepAliveObj)return}// when keep-alive route to otherif (!fromKeepAliveObj) return // 路由未设置 keep alive 则跳过const isKeepAlive = fromKeepAliveObj.keepAliveToRouteNameArr.includes(to.name)if (!isKeepAlive) {handleExclude(fromKeepAliveObj)}
}
}

在 Vue 组件中的使用

添加控制逻辑到 router.afterEach 中

另一种 Vue 中 keep-alive 控制方法相关推荐

vue中怎么清空tab选项卡的缓存_vue Tab切换以及缓存页面处理的几种方式
前言相信tab切换对于大家来说都不算陌生,后台管理系统中多会用到.如果不知道的话,可以看一下浏览器上方的标签页切换,大概效果就是这样. 1.如何切换使用动态组件,相信大家都能看懂(部分代码省略) ...
Vue中生成二维码的一种方式—vue-qr
Vue中生成二维码的一种方式-vue-qr vue实现二维码生成(vue + vue-qr)
Vue中的三种Watcher
Vue中的三种Watcher Vue可以说存在三种watcher,第一种是在定义data函数时定义数据的render watcher:第二种是computed watcher,是computed函数在 ...
vue中下载excel的使用，后端链接两种情况，一个是链接，一个是文件流
vue中下载excel使用一.这是第一种情况,后台链接地址返回的是一个url,这个时候我只要在导出按钮上绑定exportData()这个事件方法就好了 exportData() {this.time ...
vue中warning_5种处理Vue异常的方法
本文采用意译,版权归原作者所有去年一整年,我都在使用最爱的-Vue.js- 来做项目.最近突然意识到,我竟然从来没有认真去处理异常.我可以自恋地说:"我写的代码是完美的,没有BUG.&qu ...
vue中处理后台返回的 html 特殊标签(‘\lt； p style=“xxx“ \gt；‘)或(\＜p＞)的三种情况及传给后端数据的解决方案
问题一:vue中处理后台返回的 html 特殊标签('&lt: p style="xxx" &gt:')或(\<p>)的三种情况返回数据 // 返回数 ...
vue中基于echarts和基于高德地图的两种地图下钻与上浮方式
** vue中基于echarts和基于高德地图的两种地图下钻与上浮方式 ** 基于echarts的地图下钻与上浮(浙江省为例) 第一步:在<template>中构建承载echarts的do ...
vue中，scss样式的三种写法——当前页面直接定义、@import引入样式、main.js引入公共样式 deep和important的写法
vue中,scss样式的三种写法--当前页面直接定义.@import引入样式.main.js引入公共样式 & deep和important的写法 1.安装scss # 安装node-sass ...
vue中8种组件通信方式,纯干货！值得收藏
vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就 ...

另一种 Vue 中 keep-alive 控制方法

另一种方法

hook

在 Vue 组件中的使用

添加控制逻辑到 router.afterEach 中

另一种 Vue 中 keep-alive 控制方法相关推荐

最新文章

热门文章