vue使用keep-alive如何实现多页签并支持强制刷新_vue.js_

使用keep-alive实现多页签并支持强制刷新

需求

我司有一款使用Vue构建的SPA 后台管理系统，此时客户提出一个需求。

1：要求支持打开多页签

2：多页签保留状态，即切换页签的时候不重新刷新内容。

3：关闭某一页签之后，重新打开之后，需要进行刷新

4：在当前页面可以进行强制刷新功能。

如图示意（左侧箭头为多页签，右侧为强制刷新按钮,图是网图，非本公司后台管理系统页面,效果类似）

思路

1：首先编写Tags（多页签）

2：使用Keep-alive包裹 router-view。

3：利用router-view key值变化会导致内容刷新来实现页面强制刷新

已打开菜单组件

Tags（多页签）左侧箭头指出功能

Home页面

export default { data(){ return { myKeepList: [""], bindKeys:{ addEs: "24", addWorkflow: "30", announceIssuerWatching: "45", approvalHistory: "33", approvalTask: "32", bondDetail: "50", }, } }, components:{ vTags }, computed: { key() { return this.bindKeys[this.$route.name]; }, ...mapState(['routerKey','copyRight']) }, watch:{ '$route': { immediate: true, handler: function (val) {//监听路由是否变化 this.showFooter = (val.name =="dashboard"?false:true); } } }, methods: { }, created(){ // 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。 bus.$on('keepList', msg => { let arr = []; for(let i=0;i { this.bindKeys[this.$route.name] = new Date().getTime(); }); }, mounted() { }, }

使用keep-alive以后刷新部分数据如何解决

项目中遇到得问题

描述如下：

上图页面使用了keep-alive,所以当从其其他页面跳转到这个页面得时候不会刷新数据，因此解决方式为

如下图所示就可以

上图中activated和created使用方法一致，在这个方法里重新获取一下数据就好了，我们得业务场景是

点击图标选取地理位置

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！