使用keep-alive进行页面缓存，router切换页面的时候，卡顿：当前页面停留了一下，才切换到新页面，请问这是问么回事呢？
并且页面打开一段时间后，路由切换会变得越来越卡，最后甚至卡死
已解决，针对前端的问题做了优化解决方案
1、一个页面组件内表格太多，没有拆分为多个组件，这样状态条件切换时，会造成卡顿；
2、多表格绑定的同一个数据集，数据变化时，会造成多个表格同时渲染，会造成卡顿，影响性能；
①②解决方案：
状态tab的切换控制，与表格显示的控制，不要使用同一个变量；
表格显示的控制使用 v-if
在状态tab变量watch方法里：
selectTab:{
handler(newVal){
......
this.表格绑定的数据集变量 = []; // 先将数据清空
this.Tab = '-1'; // 然后将控制表格显示的变量变为 -1，也就是所有表格都不会显示
this.$nextTick(()=>{
// 待上面的改变渲染完成后，再将控制表格的变量设置为状态切换变量值，然后再执行后端请求查询
this.Tab = newVal;
this.query();
})
}
}
3、表格有很多固定列、合计脚会导致降低页面渲染速度；
解决方法：
尽量减少固定列和合计脚；配置vxe-table虚拟滚动属性，实现虚拟滚动渲染，会大大提供渲染性能。
并且，还可以设置表格内容显示不自动换行的属性，来提高渲染性能。
4、弹出层编辑页面组件，在管理页面里默认被渲染了只是没显示，影响页面渲染显示效率；
解决方法：
将v-show改为v-if控制；
编辑页面组件中，在 beforeDestroy 方法里调用执行 vxe-modal 的 close 方法
beforeDestroy(){
this.$refs['vxe-modal ref名称'].close();
}
5、部门、职员、交易方、港口、国家等下拉选择框，下拉项太多，没有改为输入后再查询显示下拉，影响页面渲染显示效率；
解决方法：
下拉选项超过50个的，都应该使用输入后再模糊搜索显示下拉项；
6、组件内data里定义的数组或对象变量，如果变量内部结构及内部属性值不会变化的，在给该变量赋值时，可使用冻结对象，如下代码，是给组件中职员数组变量 allPer 赋值冻结对象
原因：一般是数组记录比较多的，属性字段比较多的，不做冻结处理，vue会做处理导致占用大量内存空间
⑤⑥ 解决方法：
管理页面：
- 条件项中的下拉选项对应数组或对象变量，做冻结处理后再赋值 ；
- 表格绑定的数据集，做冻结处理后再赋值；
编辑页面：
- 表单中下拉选项对应数组或对象变量，做冻结处理后再赋值 ；
详情页面：
- 页面所有表格对应的数组，以及一些需要用到的辅助数据，做冻结处理后再赋值 ；
分析页面：
- 条件项中的下拉选项对应数组或对象变量，做冻结处理后再赋值 ；
- 表格绑定的数据集，做冻结处理后再赋值；
getPer() {
return this.$dmBaseSet.personData().then((data)=>{
this.allPer = Object.freeze(data.list || []);
})
},
7、部门、职员、交易方、字典、港口、国家等接口查询数据缓存到前端时，要做优化，接口只返回需要的字段
不要把所有字段都返回过来；
优化后，可以减少JS占用内存；
职员接口：40多个字段
部门：20多个字段
8、前端工程使用echarts时，不要在main全局加载到vue对象，要改为在对应页面组件中加载echarts插件去使用，这样可以减少echart占用的内存；
router-view加多个判断
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>