Vue刷新当前路由,有什么好的解决方式么?

this.$router.go(0);
location.reload() 
//这两种方式都相当于f5刷新,页面会有卡顿的情况
this.$router.push({ path: '/kong', query: {} });
// 这种方式是进入一个空白页,在空白页里面跳转回原来的页面,这种方式页面刷新相对流畅,
// 但是我发现,使用这种方式的话,在用户点击浏览器的后退键的时候,会再次进入/kong 这个空白页然后马上回来
// 导致页面无法后退

请问,有其他好的方式实现页面刷新吗?

回答:

感觉你可以看一下这个issue

但是尤大提的方法可能不满足你的需求,如果你和我一样,希望能从breforeCreate开始重走整个生命周期的话
其实在你的这个方法上略作修改就可以

this.$router.push({ path: '/kong', query: {} });

push换成replace
同样的kong这个页面里beforeRouteEnter时也用replace
就不会有那个后退的问题了

附上我用的代码吧

// 使用页面
refresh () {
  this.$router.replace({
    path: '/refresh',
    query: {
      t: Date.now()
    }
  })
}

// refresh.vue
<script>
export default {
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.$router.replace(from.path)
    })
  }
}
</script>

回答:

有一种骚操作,就是当前路由页面的最外层 用v-if=“ifreload”.
ifreload 默认为true;这时候这个页面的dom是正常渲染的。
当你需要刷新的时候,直接 this.ifreload=false;然后再ifreload=true;
当你ifreload=false的时候,页面的dom都被清除掉了。ifreload=true又重新渲染。就可以刷新本页。浏览器的回退也没有影响。

回答:

从api上可能没有,但是我觉得加 <transation>过度动画是个好办法,
如果是页面加载量导致渲染比较慢,考虑按需加载吧

回答:

vm.$forceUpdate()
示例:
迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。

或许你需要这个?(只是在文档看到,我也没用过。)

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注