zoukankan      html  css  js  c++  java
  • vue项目如何(友好的)刷新当前页

    1.场景

    在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。

    2.遇到的问题

    1. 用vue-router重新路由到当前页面,页面是不进行刷新的

    2.采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好

    3.解决方法

    provide / inject 组合

    作用:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。

    App.vue:

    声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载

    <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 ;
            })
          }
        }
      }
    </script>

    tableList.vue:

    在页面注入App.vue组件提供(provide)的 reload 依赖,在逻辑完成之后(删除或添加...),直接this.reload()调用,即可刷新当前页面。

    export default {
        inject:['reload'],//注入reload方法
        data() {
            return{}
        },
        methods:{
            add(){
             .then(res => {
              if (res.err_code == 0) {   //数据请求成功后
                this.reload() //调用reload方法刷新当前页面
              }
            })
            .catch(res => {
              console.log(res);
            });
            }
        }
    }
  • 相关阅读:
    一个关于java线程的面试题
    【Feature】初探Feature
    Foreign Keys in the Entity Framework
    JS keycode
    SQLyog8.3 . 8.4 Enterprise/Ultimate crack
    Win7下使用toad连接oracle出现can't initialize OCI 1
    ADO 数据类型转换表
    简单Jscript(ASP)模版操作文件
    自适应宽度的左右结构DIV+CSS
    一个比较好用的 classic asp Jscript 框架 SmartAsp
  • 原文地址:https://www.cnblogs.com/penghewen-cnblogs/p/12061582.html
Copyright © 2011-2022 走看看