大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE稳定放心使用
查了资料一共有三种办法,只试过两种,都成功了,介绍一下。
一、直接路由刷新
vue自带了刷新的办法
this.$router.go(0);
但是这个办法会让整个当前页面刷新,相当于F5。如果项目中只是做一个编辑修改操作,希望修改后数据立马改变,但是使用此方法会出现一个短暂的空白页(如下图),用户效果特别不好,不推荐。
二、使用provice和inject结合的方法
这种方法会局部刷新,不会出现整个页面刷新的效果,非常适合项目中更新操作后的刷新页面。
1.首先找到vue项目中的App.vue,这是根组件,相当于所有*.vue的父组件了,所以在这里去定义reload可以全局使用。
2.在App.vue中添加刷新代码
<template>
<div id="app">
<router-view v-if="isRouterAlive"></router-view>
</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>
这是我的app.vue,大家的可能不一样,不过不影响。
3.然后在需要刷新的子组件页面中添加inject。
export default {
inject:['reload'],
data () {
return {
...
}
},
4.最后在刷新页面中需要刷新的地方添加this.reload()方法
this.reload();
还有一种刷新方法是先进入一个空路由,然后在立马返回,这种方法没什么必要,百度上也有方法详解,所以这里不介绍了,个人认为还是使用provice和inject结合最适合。
希望可以帮助到大家!
一开始嫌麻烦用的是第一种,但是放到项目中的时候实在是影响,体验效果极差,于是果断换了方法!果然还是第二种好用。所以以后不要嫌麻烦……多试试新方法!
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/181300.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...