需求说明:
本文章主要是解决第三个需求。
代码如下:
(代码说明:store.state.pages是我存储标签页的列表,记录了当前打开的标签页的路由数据)
旧的方法:
//使用Vue.mixin的方法拦截了路由离开事件,并在该拦截方法中实现了销毁页面缓存的功能。
let cachePageDataList =[]
Vue.mixin({
beforeRouteLeave:function(to, from, next) {
const pages= this.$store.getters.pages.map(item =>{returnitem.name
})
const expect= ['login']if (from && expect.indexOf(from.name) < 0 && pages.indexOf(from.name) < 0) { //此处判断该路由对应的标签页是否已关闭,以此判断是否摧毁本层缓存。
const $vnode = this.$vnodeif (($vnode && $vnode.data.keepAlive) &&($vnode.parent&& $vnode.parent.componentInstance && $vnode.parent.componentInstance.cache) &&($vnode.componentOptions)
) {var key = $vnode.key ==