vue项目刷新当前页

栏目: JavaScript · 发布时间: 6年前

内容简介:当在vue项目中需要刷新当前页时,第一个是不是想到this.$router.push(当前页面的路径)?但是你会发现,这样并没有什么用。因为基于vue这个框架,它发现当前路由没有改变,它并不会刷新。或者

当在vue项目中需要刷新当前页时,第一个是不是想到this.$router.push(当前页面的路径)?

但是你会发现,这样并没有什么用。因为基于vue这个框架,它发现当前路由没有改变,它并不会刷新。

解决方法1

this.$router.go(0)

或者

window.location.href()

这两种方式本质上就是重新刷新了整个页面而且随着项目业务的复杂程度,很可能会增加一些别的初始化请求,所以这并不是最优解。

解决方法2

思路是新增一个空白页,当需要执行刷新先跳转到空白页,再快速跳转回来。

实现起来很简单,我就不贴上代码了。

解决方法3

这个方法最方便快捷,连空白页的组件也不需要写。

这里用到了vue框架的provide和inject

在父组件中注入以来provide一个对象,在子组件中inject。

1、在APP.vue 页面加一个条件渲染,默认为true

<template>
  <div id="app">
    <router-view v-if="noRefresh" />
  </div>
</template>
<script>
export default {
  name: 'App',
  provide() {
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      noRefresh: true
    }
  },
  methods:{
    // 需要reload时先将页面隐藏,在dom更新后的回调再将页面显示
    reload() {
      this.noRefresh = false
      this.$nextTick(function(){
        this.noRefresh = true
      })
    }
  }
}
</script>

子组件

<script>
export default {
    inject:['reload'],
    methods:{
        func(){
            //刷新时执行的函数
            this.reload()
        }
    }
}
</script>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Pro CSS and HTML Design Patterns

Pro CSS and HTML Design Patterns

Michael Bowers / Apress / April 23, 2007 / $44.99

Design patterns have been used with great success in software programming. They improve productivity, creativity, and efficiency in web design and development, and they reduce code bloat and complexit......一起来看看 《Pro CSS and HTML Design Patterns》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

SHA 加密
SHA 加密

SHA 加密工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具