关于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>

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

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

关于vue的组件重新加载相关推荐

vue 父组件重新加载子组件
vue 父组件重新加载子组件通过给子组件添加key或者v-if 重新加载子组件: html: <button @click="update">更新</butt ...
Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue
Vue 单文件组件传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...
webpack和vue的按需加载组件、console、抓包
1.webpack和vue的按需加载组件 webpack特有的懒加载文件的方式,很大的提升了webpack打包SPA应用的在性能方面. 而从webpack2以后require.ensure已经被imp ...
vue延迟渲染组件_性能优化之组件懒加载: Vue Lazy Component 介绍
这篇文章分享了从遇到前端业务性能问题,到分析.解决并且梳理出通用的Vue 2.x 组件级懒加载解决方案(Vue Lazy Component )的过程. 初始加载资源过多问题起源于我们的一个页面,下 ...
vue 组件延时加载_为什么以及如何延迟加载角组件
vue 组件延时加载 "Before software can be reusable it first has to be usable." "在软件可重用之前,首先必 ...
vue的路由组件的引入以及路由组件懒加载和router-link
App.vue <template><div><router-link to="/">首页</router-link><rou ...
vue实现当前组件重新加载
遇到问题的场景: 数据发生了变化,组件并没有响应到问题所在需要把当前组件完全还原成初始化状态,不要页面全部刷新 4种解决方法: 重新加载整个页面(不推荐) v-if可以实现 true (加载)和f ...
Vue中使用Openlayers加载Geoserver发布的TileWMS时单击获取shp文件的坐标信息
场景 Vue中使用Openlayers加载Geoserver发布的TileWMS: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/ ...
Vue中使用Openlayers加载Geoserver发布的TileWMS
场景 Openlayers下载与加载geoserver的wms服务显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114 ...

关于vue的组件重新加载

关于vue的组件重新加载相关推荐

最新文章

热门文章