开发中遇到的vue问题总结
1.使用axios循环调用接口,解决批量删除、移动、创建等的批量操作
let list = [{id: 01, name: 'xx'}, {id: 02, name: 'mm'},{id: 03, name: 'bb'}]
//循环调用接口
let result = list.map(item => {
return Promise(resolve => {
//接口中使用id
axios.get(url, item.id).then(data => {
resolve(data)
})
})
})
//使用promise.all方法等待所以异步任务执行结束
Promise.all(result).then((data) => {
//执行后续操作(如关闭loading,弹窗等)
}).catch(err => {
//错误处理
})
2.vue中实现数据不刷新(例如设备列表当前处于第五页,点击设备详情返回来时列表任要处于第五页)使用keep-alive解决
//在App.vue文件中
<div class="main-content">
<keep-alive>
<router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />
</div>
//deviceRouter.js 文件
{
path: '/device',
component: () => import('@/views/admin/device/List.vue'),
name:'device',
meta: {
activeMenu: '/device/',
keepAlive: true //使用属性标记需要缓存的路由
}
},
3.Vue中使用keep-alive以后刷新部分数据如何解决(接上文问题,使用了keep-alive后页面被缓存了,但是有时候从特定页面跳转回来带着查询参数需要刷新页面)
//在生命周期函数中执行操作
activated(){
if(this.$route.params.mac){ //获取路由参数
this.isSearch = true
this.mac = this.$route.params.mac
this.getList({mac: this.$route.params.mac}) //getList为获取数据的接口调用
}
},