vue 中缓存组件刷新问题
一.页面层级的组件刷新
1. 首先在路由中添加keepAlive:true
{ path: '/login', component: (resolve) => require(['@/views/login'], resolve), hidden: true, meta: {keepAlive:true} },
2.在vue组件标签中添加v-if="$route.meta.keepAlive"
if="$route.meta.keepAlive" />
3.在需要刷新的组件中添加activated中添加需要刷新的方法
mounted(){ this.queryParams.mainWidth=this.$refs.tableRef.bodyWidth }, activated() {
this.getList(); },
二.子组件的刷新
1.注：所有的代码都在父组件写
页面代码添加CaseOperation是子组件，sonRefresh定义刷新用的参数
if="sonRefresh" />
2.JS中添加在操作的函数中添加代码
data() { return { sonRefresh:true } }， methods: { handleClick2(){ this.sonRefresh= false; this.$nextTick(() => { this.sonRefresh= true; }); }, }
三.不相关的组件间刷新
1.首先创建一个空的JS ，callUtils.js
import Vue from 'vue' export default new Vue
2.引入，在一个函数中添加发送$emit
import callUtils from "@/utils/callUtils.js"
callUtils.$emit('tiaojiejilu')
3.在需要刷新的组件中执行，当然需要引入
import callUtils from "@/utils/callUtils.js"
callUtils.$on('tiaojiejilu',()=>{
//这里面添加需要执行的函数
});