开发中遇到的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为获取数据的接口调用
     }
}，