vue 使用keep-alive后,怎样清除缓存|清除keep-alive
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
需求:从列表页进入详情页,再返回列表页时保留查询条件,但在切换其他tab时,清空查询条件。
解决:保留查询条件很简单,直接引入keep-alive,但是清除的话,vue本身没有api直接清除,所以要单独处理。
router/index,拦截路由并做处理:
beforeRouteLeave:function(to, from, next){
// 增加离开路由时清除keep-alive
if (from && from.meta.rank && to.meta.rank && from.meta.rank == to.meta.rank)
{//此处判断是如果返回上一层,你可以根据自己的业务更改此处的判断逻辑,酌情决定是否摧毁本层缓存。
if (this.$vnode && this.$vnode.data.keepAlive)
{
if (this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache)
{
if (this.$vnode.componentOptions)
{
var key = this.$vnode.key == null
? this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag ? `::${this.$vnode.componentOptions.tag}` : '')
: this.$vnode.key;
var cache = this.$vnode.parent.componentInstance.cache;
var keys = this.$vnode.parent.componentInstance.keys;
if (cache[key])
{
if (keys.length) {
var index = keys.indexOf(key);
if (index > -1) {
keys.splice(index, 1);
}
}
delete cache[key];
}
}
}
}
this.$destroy();
}
next();
},
同时在路由中添加meta:
{
// 账号列表
path: '/account',
name: 'account',
component: () => import('../views/account/index.vue'),
meta: { title: '账号列表' ,rank:1.5}
},
{
// 添加账号
path: '/accountadd',
name: 'accountadd',
component: () => import('../views/account/add.vue'),
meta: { title: '添加账号' ,rank:2.5}
},
{
// 编辑账号
path: '/accountedit/:id',
name: 'accountedit',
component: () => import('../views/account/add.vue'),
meta: { title: '编辑账号' ,rank:2.5}
},
{
// 角色列表
path: '/role',
name: 'role',
component: () => import('../views/role/index.vue'),
meta: { title: '角色列表' ,rank:1.5}
},
vue开发宝典:http://raboninco.com/1MsLW
GitHub 加速计划 / vu / vue
207.52 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 3 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)