失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > Vue刷新当前页面(成功)

Vue刷新当前页面(成功)

时间:2019-02-23 21:19:58

相关推荐

Vue刷新当前页面(成功)

查了资料一共有三种办法,只试过两种,都成功了,介绍一下。

一、直接路由刷新

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结合最适合。

希望可以帮助到大家!

一开始嫌麻烦用的是第一种,但是放到项目中的时候实在是影响,体验效果极差,于是果断换了方法!果然还是第二种好用。所以以后不要嫌麻烦……多试试新方法!

如果觉得《Vue刷新当前页面(成功)》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。