首先:vue的全局頁面重新整理方法,原理都是一樣,用v-if控制元件的狀态,然後在銷毀重建
//1、在app.vue中定義方法:
<template>
<div id="app">
<router-view v-if="isRouterAlive"></router-view>//1、加v-if,控制整個app頁面
</div>
</template>
<script>
export default {
name: 'App',
provide(){
return{
reload:this.reload//2、定義狀态
}
},
data(){
return{
isRouterAlive:true
}
},
methods:{
reload(){//頁面重新整理方法
this.isRouterAlive = false//3、定義方法,調動讓他銷毀掉
this.$nextTick(()=>{
this.isRouterAlive = true
})
}
}
}
</script>
<style >
</style>
//--------------------------------------------------------------------
2、調用頁面:
inject:['reload'],//注入reload方法
this.reload();//頁面重新整理方法-這個頁面元件-需要的地方調用這個方法
其次,單獨銷毀某個元件:
1、template部分
<cTable v-if="hackReset" :list="jrzytjData" :columns="JRZYTJcolumns" @clickRow="jrzytjClick" @jrzytjSelChange='jrzytjSelChange' :tableClass="'jrzytjTb'"></cTable>
2、js部分
data裡面注冊變量:
hackReset:true,//銷毀重新建立元件
需要調動方法的部分:
/**
* 元件銷毀并删除
*/
this.hackReset = false
this.$nextTick(()=>{
this.hackReset = true
})