精华内容
下载资源
问答
  • 2021-02-01 18:25:18

    VUE刷新当前页面,重载页面数据

    在开发Vue项目过程中,执行CRUD完操作的时候,我们需要刷新一下页面,重载数据。但发现使用最简单的页面刷新方法location.reload()或this.$router.go(0)均会导致页面刷新过程中出现空白现象的发生,体验不佳;在vue中,可以用到一个 provide / inject 这对用例,通过控制router-view 的显示与隐藏,来重渲染路由区域,重而达到页面刷新的效果。

    1.首先在我们的根组件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
           })
        }
      },
      components:{
      }
    }
    </script>
    

    2.然后在子组件里面进行引用

    export default {
      inject: ['reload'],
      data() {
        return {
          dues: [],
          
    

    3.在执行完相应的操作,后调用reload方法

          this.axios
            .post("/dc/xxxe/xxxx",
              qs.stringify(pay)
            )
            .then((res) => {
            const { data, status } = res.data;
            if (status.code === 200) {
                this.reload();
                //this.$router.go(0);
            } else {
                this.$toast.fail(status.message);
            }
          });
    
    
    更多相关内容
  • 想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种: 如果希望点击确定的时候,Dialog 对话框关闭的时候,当前...
  • Vue刷新当前页面几种方式

    千次阅读 2021-12-28 21:10:00
    这个姿势是利用了 history 中前进和后退的功能,传入 0 刷新当前页面。但是有一个问题就是页面整个刷新过程中会白屏,严重影响用户的体验感,效果不好。 this.$router.go(0) 姿势二:location.reload() 这个姿势是...

    问题:

    最近些日子项目中突然碰到了一个需求,再完成编辑操作之后需要进行页面刷新,通过实验有如下几种姿势可以解决需求中的问题,下面进行简单总结如下。

    姿势一:this.$router.go(0)
    这个姿势是利用了 history 中前进和后退的功能,传入 0 刷新当前页面。但是有一个问题就是页面整个刷新过程中会白屏,严重影响用户的体验感,效果不好。

    this.$router.go(0)
    

    姿势二:location.reload()

    这个姿势是利用了直接使用刷新当前页面的方法。但是同样存在有一个问题就是页面整个刷新过程中会白屏,严重影响用户的体验感,效果也是不好,和姿势一的现象一直,也不推荐使用。

    location.reload()
    

    姿势三:provide / inject组合(推荐使用)

    允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。
    provide:选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。
    inject:一个字符串数组,或一个对象,对象的 key 是本地的绑定名。
    注意:provide和inject绑定并不是可响应的。这是刻意为之的。如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。

    基本使用步骤如下:

    步骤一:(App.vue)
    通过 $nextTick(),协助实现。先把 移除,移除后再重新添加,达到刷新当前页面的功能。是目前最合适的实现方式。

    <template>
     <div id="app">
       <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>
    

    步骤二:(chapter.vue)

    inject: ['reload'],
    

    在这里插入图片描述

    代码结构

    步骤三:(chapter.vue)
    直接this.reload()调用,即可刷新当前页面。

    this.reload()// 需要刷新页面
    

    在这里插入图片描述

    展开全文
  • 我们在开发vue的页面的时候,有时候会遇到需要刷新当前页面功能,但是vue框架自带的router是不支持刷新当前页面功能的,它只支持在路由路径变化时刷新页面。基于这个原理,为了实现刷新页面,可以先跳转到一个空页面...
  • vue刷新当前页面

    2021-11-30 10:02:20
    vue刷新当前页面有挺多种方法,比如 window.location.reload() 或者 this.$router.go(0) 但是这两种方法是会出现一瞬间的白屏,体验不好,所以这里给大家推荐第三种比较好用的刷新页面的方法 在app.vue的<...

    vue刷新当前页面有挺多种方法,比如

    window.location.reload()

    或者

    this.$router.go(0)

    但是这两种方法是会出现一瞬间的白屏,体验不好,所以这里给大家推荐第三种比较好用的刷新页面的方法

    在app.vue的<router-view></router-view>加上v-if属性

    <router-view v-if="isRouterAlive"></router-view>
    

    在data里面加上isRouterAlive,当然这个属性名可以自己定义,默认值为true

      data () {
          return {
            isRouterAlive: true
          }
      }
    

    methods里面加入一个刷新的方法

    methods: {
        reload () {
          this.isRouterAlive = false
          this.$nextTick(function() {
             this.isRouterAlive = true
          })
        }
      }
    

    最后,需要把这个函数 provide 出去

    provide () {
        return {
          reload: this.reload
        }
      }
    

    这样,app.vue上就设置完了

    那么当我们需要刷新的时候,在需要的页面上加上这个函数就可以了

    首先注入这个函数

    inject: ['reload']
    

    然后在需要用到这个函数的地方去引用就行了

    refresh () {
      this.reload()
    }
    

    这样子就可以刷新页面了,而且不会出现白屏的情况,比前面两种方法好用,推荐大家使用。

    附带上完整代码

    <template>
      <div id="app">
        <div class="wrap">
          <router-view v-if="isRouterAlive"></router-view>
        </div>
      </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>
    
    <style>
      #app{
        position: relative;
      }
      @media only screen and (min-width: 1200px) {
        .wrap{
          width: 65%;
          margin: 0 auto;
        }
      }
      
    </style>
    
    

    <template>
        <button @click="refresh"></button>
    </template>
    <script>
        export default{
            name: 'refresh',
            inject: ['reload'],
            methods: {
                  refresh () {
                      this.reload()
                  }
            }
        }
    </script>
    

    感谢大家看完,觉得有用的可以点一下喜欢,蟹蟹蟹蟹

    展开全文
  • Vue刷新当前页面并url带参

    需求是点击后进行带参数页面刷新

    问题1 一开始是直接使用this.router.go(0)进行刷新的话无法对参数进行更新 Vue刷新当前页面几种方式

    问题2 使用空白页跳转时第一次replace时会报错
    在这里插入图片描述
    于是进行资料查找把该文章的三种方法都尝试过后都没有效果(不知道为什么!)

    最后想到当我直接replace(或者push)同一页面时虽然页面内容不刷新 ,但是浏览器URL已经改变。所以我在此时进行一次this.$router.go(0)来进行刷新完成效果(虽然有白屏)

    展开全文
  • 主要介绍了解决vue刷新页面以后丢失store的数据问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 常常会遇到在删除或者增加一条数据的时候想要刷新页面来显示数据这里提供两种方式 方法一: 整个页面刷新 location.reload() ① this.$router.go(0) ② 相当于强制刷新页面整个页面刷新,会有一瞬间空白 方法二: ...
  • vue刷新当前页面或者当前组件

    千次阅读 2020-09-24 20:27:03
    很多时候我们会遇到页面刷新,传统的刷新会使页面一片白,带来很不好的体验,vue中为我们提供了一个provide和inject,可以在项目中巧妙的使用。 使用步骤: ①:router-view挂载 ②:在router-view所在组件中写...
  • vue刷新当前页面,重载页面数据

    千次阅读 2021-03-15 10:27:48
    vue-router重新路由到当前页面,页面是不进行刷新的 采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好 3.解决方法 provide / inject 组合 作用:允许一个祖先组件向其...
  • 第一个想到的方法是this.$...这个方法相当于( ctrl + R )刷新当前页面 , 但是刷新过后vuex里面的值也会重新刷新 , 当我们要实现多个组件根据 vuex 里面的值做相应的判断时 , 这个功能不能实现 , 于是我们结合window.se
  • vue刷新当前页面重新传递参数

    千次阅读 2020-08-30 16:43:43
    vue刷新当前页面重新传递参数 在vue中碰到了需要刷新当前页面并传递重新params参数的需求。 我们可以进入空白页再在空白页跳转回到上一个页面实现需求 首先在空白页写上路由守卫beforeRouteEnter,在...
  • 当用户进行操作后需要刷新当前局部的页面时,如果使用 location.reload(); 与 this.$router.go(0); 这2种刷新,原理分别是F5类刷新以及跳转至当前页面的刷新,虽然也能刷新,但是会造成当前全部页面刷新。如果用户...
  • Vue刷新当前页面

    2019-03-24 17:57:27
    说到了,点击切换ID来实现品牌数据的替换,但是有一点,我们的id是通过vuex中来计算的到的,这样只有在页面刷新的时候才能获取最新的ID,这就需要我们在每次点击按钮切换的时候,都要刷新当前页面。 我们可以通过在...
  • 这是一种最实用的vue刷新当前页面,其他方式一般会出现一个瞬间的空白页面,体验不好,相当于按ctrl+F5 强制刷新那种 方式:provide / inject 组合 方式实现vue页面刷新 1.修改App.vue代码如下图所示 通过声明...
  • vue 刷新当前页面或者跳转页面时候刷新

    万次阅读 多人点赞 2018-08-03 14:59:13
    1 用vue-router 重新路由的时候到当前页面的时候是不进行刷新的 2 采用window.reload() 或者router.go(0) hisory.go(0) 刷新的时候整个浏览器进行刷新加载, 但是页面闪烁, 体验不好 解决办法 方式一 先新建...
  • 1.首先,要修改下你的app.vue <template> <div id="app"> <router-view v-if="isRouterAlive"></router-view> </div> </template> <script> export default { name...
  • Vue刷新当前页面解决方案

    千次阅读 2020-05-18 15:40:03
    这个姿势是利用了 history 中前进和后退的功能,传入 0 刷新当前页面。但是有一个问题就是页面整个刷新过程中会白屏,严重影响用户的体验感,效果不好。 this.$router.go(0) 方法二:location.reload() 这...
  • 第一种: this.$router.go(0) 这种就是让整个页面重新加载一次,但是会出现几秒钟的白屏情况,对用户体验不好。 第二种: location.reload() ...这种就比较简洁了,哪个数据需要刷新就调用那个方法,也相当于刷新页面
  • 解决vue 刷新当前页面的问题

    千次阅读 2020-07-06 18:15:29
    vue刷新当前页面不常用,在我的项目中还是有类似的需求,这里记录一下吧 在app.vue中添加刷新方法 <template> <div id="app"> <router-view v-if="isRouterAlive" />//通过变量控制路由重新加载...
  • 主要介绍了Vue页面刷新记住页面状态的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 最近公司vue项目中有一个需求,需要在当前页面刷新或跳转时提示保存并可取消刷新,以防止填写的表单内容丢失。刚开始思考觉得很简单,直接在Router的钩子中判断就好了,但是会发现还有新的问题存在,浏览器刷新和...
  • 在需要刷新的地方直接使用vue的路由跳转 this.$router.go(0) 方式三:(推荐此方式,因为此方法不会出现短暂闪烁的空白页) 第一步:App.vue页面 <template> <div id="app"> <div class=...
  • 但是这个办法会让整个当前页面刷新,相当于F5。如果项目中只是做一个编辑修改操作,希望修改后数据立马改变,但是使用此方法会出现一个短暂的空白页(如下图),用户效果特别不好,不推荐。 二、使用provice和...
  • vue刷新当前

    2021-10-30 15:01:58
    在我们开发vue项目的时候经常会遇到需要刷新当前页的情况 遇到这种我们首先可能会想到路由跳转到当前页 this.$router.replace({ path: '当前页在router里配置的路径', name: '当前页在router里配置的name' }) ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 27,071
精华内容 10,828
关键字:

vue刷新当前页面

友情链接: ClientDemo.rar