vue 刷新当前页面

• Z时代
• 2024-01-10
• 分类：综合

情景：

1. 　　比如在删除或者增加一条记录的时候希望当前页面可以重新刷新
2. 　　请求接口中直接将数组结果取第0个数组或者第n个数组给变量，会报错 0 的错误，此时多次刷新即可

方法一、这种方法简单快捷，但是页面会有空白瞬间，体验不够好

this.$router.go(0);
location. reload()

　　　　_getquery(){
                getquery(
                    {product_id: this.product_id},
                    {Authorization: this.access_token}
                ).then( (res)=>{
                    if(res === undefined || res === ''){
                        this.reload();  // this.$router.go(0)
                    }else{
                        //请求到数据
                         this.product_content = res.answer[0].content.body;
                    }
                })
　　　　}

方法二、

1. 在App.vue 文件中，router-view中加代码：v-if="isRouterAlive"

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

　　2. 在App.vue文件中，在script中加入如下代码：

<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>

　　3.在需要刷新的vue页面中 注入依赖 ：inject: ['reload'],

　　4.在需要刷新的vue页面中  调用 ： this.reload();

　　　　_getquery(){
                getquery(
                    {product_id: this.product_id},
                    {Authorization: this.access_token}
                ).then( (res)=>{
                    if(res === undefined || res === ''){
                        this.reload();  // this.$router.go(0)
                    }else{
                        //请求到数据
this.product_content = res.answer[0].content.body;
                    }
                })
　　　　}

以上是 vue 刷新当前页面 的全部内容， 来源链接： utcz.com/z/380332.html