This.$router.push方法 keep-alive缓存不起作用,反而是新增一个组件
发布于 4 年前 作者 feer 2749 次浏览 来自 问答
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

我的场景是这样,左边是菜单,右边是内容,使用elment-ui的tabs,

image

使用 缓存页面,避免打开过的页面再次重新加载,但是当我关闭页面(关闭tab)时候,我需要销毁这个组件,调用item .$destroy() 方法,也能成功的销毁组件。再次点击左边的菜单,调用this.$router.push方法时候,页面正常出现新增一个tab选项卡,但是,我切换tab时候(tabs选中事件中调用方法),使用的是this.$router.push,代码如下
// tabs, 选中tab
selectedTabHandle (tab) {
tab = this.mainTabs.filter(item => item.name === tab.name)
this.$router.push(tab[0].path)
}

我发现每次调用this.$router.push 就会创建一个组件,而不是缓存的组件,所以很郁闷,总结的问题 就是 使用keep-alive时候,第一次调用this.$router.push 是能缓存,销毁之后再次调用或者多次调用this.$router.push 缓存不在生效,而是不断的创建组件。有没有大神遇到过这个问题,就是做tabs的时候,我想使用缓存页面,如果已经打开,就使用缓存页面,如果关闭重新打开就是新的组件页面,切换tab也是使用缓存组件页面

回到顶部