关于vue的组件重新加载

因为项目样式的问题，所以没有选择去使用路由跳转，而是在一个页面当中import。

这样随之而来的问题就是进来默认加载造成的页面非常卡...

那么想了一个办法解决这个问题

利用组件重新加载 详细 > 传送门

最开始是 定义一个数组 push数据，然后遍历，如果有的话返回个true给组件上面的v-if显示数据。

这是我的代码。（修改前）

<a @click="clickADD(3)"><li><span>首页</span></li></a>
<a @click="clickADD(4)"><li><span>信息</span></li></a>

<Test03 v-if="StateCheck(3)" />
<Test04 v-if="StateCheck(4)" />

function

<script>
import Test03 from '@/components/Test/Test03'
import Test04 from '@/components/Test/Test04'
export default {
  name: "Index",
  components: {
    Test03,
    Test04,
  },
  data(){
	  return{
		  ShowState:[],
	  }
  },
  methods:{
	  clickADD(item){
		  this.ShowState.push(item);
	  },
	  StateCheck(item){
		  for(let i = 0 ; i < this.ShowState.length ; i++){
			  if(this.ShowState[i] == item)	return true;
		  }
		  return false;
	  }
  },
};
</script>

这样子的弊端是，首次加载效果比较好，如果是数据需要进入一次刷新一次的就不是特别的好了。所以我修改了一下代码

(因为项目上了ts 所以用的 ts语法 还加了setup)请按需修改

<a @click="clickADD(3)"><li><span>首页</span></li></a>
<a @click="clickADD(4)"><li><span>信息</span></li></a>

<Test03 v-if="testState3" />
<Test04 v-if="testState4" />

 function

<script lang="ts" setup>
    import Test03 from '@/components/Test/Test03.vue'
    import Test04 from '@/components/Test/Test04.vue'
	import { nextTick,ref } from 'vue-demi';
	
	let testState3:any = ref(false);
	let testState4:any = ref(false);

	function clickADD(item:Number){
		eval("testState"+item+".value=false")
		nextTick(function () {
            eval("testState"+item+".value=true") // 重新加载组件.
        }) 
	}
</script>

这样子点对应的导航会重新加载一次组件。

提供一个可行的思路。如果还有更简单的方法戳我！