zoukankan      html  css  js  c++  java
  • vue 刷新当前页面

    情景:

    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 id="app">
        <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;
    } })     }
  • 相关阅读:
    GitHub之fetch:更新fork后的项目
    实验二 结对编程 第一阶段
    博客园之鼠标点击特效
    博客园之鼠标粒子吸附特效
    实验五 单元测试
    实验四 代码评审
    第三次实验 UML 建模工具的安装与使用
    结对编程(阶段二)
    结对编程第一阶段
    实验一 GIT 代码版本管理
  • 原文地址:https://www.cnblogs.com/dudu123/p/10307454.html
Copyright © 2011-2022 走看看