vue2页面刷新
vue页面刷新
·
一、直接调用源生js方法刷新页面
window.location.reload()
二、使用vue路由跳转刷新页面
this.$router.go(0)
三、使用provide和inject
在App.vue主组件中定义刷新页面方法,在需要刷新的页面中调用
App.vue组件
<template>
<div>
<router-view v-if="show" />
</div>
</template>
<script>
export default {
data(){
return{
show:true
}
},
provide() {
return {
reload: this.reload
}
},
method:{
// 高阶组件定义刷新方法
reload() {
this.show = false
this.$nextTick(() => {
this.show = true
})
},
}
}
</script>
需要刷新页面的组件
<script>
export default {
data(){},
inject: ['reload'],
methods: {
sxb() {
console.log('刷新')
this.reload()
},
}
</script>
注意:
方法一和方法二为强制刷新页面,页面会出现空白,用户体验感不好;方法三为普通刷新,不会出现空白
更多推荐
已为社区贡献7条内容
所有评论(0)