1). location方式
location.reload()
2). router方式
this.$router.go(0)
这两种方法都可以达到页面刷新的目的,简单粗暴,但是用户体验不好,相当于按F5刷新页面,会有短暂的白屏,相当于页面的重新载入。
3). provide/inject方式
通过路由跳转的方法刷新,具体思路是点击按钮跳转一个空白页,然后再马上跳回来:
App.vue
<template>
<div id="app">
<router-view v-if="isRouterAlive"/>
</div>
</template>
<script>
export default {
name: 'App',
provide() {
return {
reload: this.reload
}
},
data() {
return {
isRouterAlive: true
}
},
methods: {
reload() {
this.isRouterAlive = false
this.$nextTick(function() {
this.isRouterAlive = true
})
}
}
}
</script>
页面的引入:
export default {
inject: ['reload'],//注入
letComplete(e) {
const params = {
order_id: e.id,
order_status: 'complete'
}
modify(params).then(response => {
console.log(response.data)
})
this.reload() //调用注入的组件
}
}
}
这也即可达到刷新的效果,但当点击按钮时所有页面重新渲染
4.对列表操作后的表格刷新的操作方法:
当我们在操作数据表格时,会对表格进行增删改查,做完操作我们需要对列表进行刷新来达到重新渲染,但是当如果存在分页,我们在比如第3页进行删除操作,如果按照以往的刷新方法,刷新完后便进入了第一页,这肯定不是我们想要的,这时候我们常用的做法是重新调用数据渲染方法,通常我们会有获取数据接口,删除接口等等,页面加载时调用获取数据的方法,当我们执行删除操作时,再重新调用获取数据的方法即可。