当前位置 博文首页 > vue.js刷新当前页面的实例讲解

    vue.js刷新当前页面的实例讲解

    作者:小妮浅浅 时间:2021-02-17 09:02

    在我们修改过页面的某些数据后,通过想要把页面刷新一下,看看修改后的结果。由于vue的存在,页面是不会自动刷新的,需要我们手动进行操作。在vue里有三种刷新方法,最推荐的就是组合控制法,另外另种方法也会分享给大家学习,下面我们一起来看看vue如何刷新页面吧。

    1.强制刷新

    window.location.reload()

    原生 js 提供的方法;

    this.$router.go(0),vue 路由里面的一种方法;

    这两种方法都可以达到页面刷新的目的,简单粗暴,但是用户体验不好,相当于按 F5 刷新页面,页面的重新载入,会有短暂的白屏。

    2.伪造刷新

    通过路由跳转的方法刷新,具体思路是点击按钮跳转一个空白页,然后再马上跳回来

    // index.vue 首页
    this.$router.replace('/empty')
    // empty.vue 空白页
    created() {
      this.$router.replace('/')
    }

    3.使用provide / inject组合控制的显示

    vue官方说明中允许一个祖先组件通过设置provide/inject向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。provide/inject 是解决组件之间的通信问题的利器,不受层级结构的限制。

    在项目中修改app.vue文件:

    <template>
     <div >
      <router-view v-if="isRouterAlive"/>
     </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>

    注入依赖:

    export default {
     inject:['reload'], //注入依赖
     name: "CompanyConfigure",
     data() {
      return {... ...

    调用:

    this.reload();
    js
    下一篇:没有了