一、通过js原始方法刷新
缺点： 出现闪白
<template>
<div>
<div class="header">
<button @click="update()">刷新页面</button>
</div>
</div>
</template>
<script>
export default {
data(){
return{
}
},
methods:{
update(){
location.reload()
}
}
}
</script>二、通过Vue自带的路由进行跳转
缺点： 出现闪白
<template>
<div>
<div class="header">
<button @click="update()">刷新页面</button>
</div>
</div>
</template>
<script>
export default {
data(){
return{
}
},
methods:{
update(){
this.$router.go(0)
}
}
}
</script>
三、通过在APP页面进行demo进行刷新(推荐)
优点： 不闪白
vue2写法
（1）、在APP页面中写入下面代码
<template>
<div id="app">
<router-view v-if="isShow"/>
</div>
</template>
<script>
export default {
name: 'App',
provide(){
return{
reload:this.reload
}
},
data(){
return{
isShow:true
}
},
methods:{
reload(){
this.isShow=false;
this.$nextTick(()=>{
this.isShow=true
})
}
}
}
</script>
（2）、在需要刷新的页面进行引入并使用
<template>
<div>
<div class="header">
<button @click="update()">刷新页面</button>
</div>
</div>
</template>
<script>
export default {
data(){
return{
}
},
inject:[
'reload'
],
methods:{
update(){
this.reload()
console.log('刷新页面')
}
}
}
</script>
2. vue3.2写法
（1）、在APP页面中写入下面代码
<template>
<router-view v-if="isRouter" />
</template>
<script setup>
import { nextTick, provide, ref } from "Vue"
const isRouter = ref(true)
const reload = () => {
isRouter.value = false
nextTick(() => {
isRouter.value = true
})
}
provide("reload", reload)
</script>
<style scoped>
</style>（2）、在需要刷新的页面进行引入并使用文章来源：https://www.toymoban.com/news/detail-563056.html
<script setup>
import { inject } from 'vue'
const reload = inject("reload")
// 刷新页面
const onSubmitForm = () => {
reload()
}
</script>如果对您有用的话，别忘了给个三连，多谢多谢文章来源地址https://www.toymoban.com/news/detail-563056.html
到了这里，关于Vue中刷新页面的三种方式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
