一、通过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进行刷新，不会像前两种那样出现短暂的闪烁效果，提升用户体验，通常可以使用这种方式
（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>
如果对您有用的话，别忘了给个三连，多谢多谢
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/183315.html原文链接：https://javaforall.net
