Vue中的刷新的几种方法

川长思鸟来 2023-02-28 11:13 1阅读 0赞

**1.场景**

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

**2.遇到的问题**

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

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

**3.解决方法**

provide / inject 组合

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

在app.vue里添加：

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

<template>
        <div id="app">
          <router-view v-if="isRouterAlive"></router-view>
        </div>
    </template>
    
    <script type="module">
        export default {
            provide () {    //父组件中通过provide来提供变量，在子组件中通过inject来注入变量。
                return {
                    reload: this.reload
                }
            },
            data() {
              return {
                  isRouterAlive : true
              };
            },
            methods: {
                reload () {
                    this.isRouterAlive = false;            //先关闭，
                    this.$nextTick(function () {
                        this.isRouterAlive = true;         //再打开
                    })
                }
            }
        }
    </script>
    
    <style lang="less" scoped>
    
    </style>

在需要reload的页面里添加：

inject:['reload'], //注入App里的reload方法

this.reload();

发表评论取消回复

表情：

评论列表（有 0 条评论，1人围观）

还没有评论，来说两句吧...

相关阅读

相关 Angular刷新当前页面的几种方法（转载）

默认，当收到导航到当前URL的请求，Angular路由器会忽略。 <a routerLink="/heroes" routerLinkActive="active">

Dear 丶/ 2023年07月13日 03:27/ 0 赞/ 52 阅读

相关 PHP页面实现局部刷新，无刷新加载的几种方法

PHP页面实现局部刷新，无刷新加载方法其实挺多的。以前比较常用的是iframe这样来做。现在多了个ajax，所以一般情况下都是用的ajax。第一种方法，ajax实现：

朱雀/ 2023年06月10日 12:23/ 0 赞/ 64 阅读

相关 Vue中的刷新的几种方法

1.场景在处理列表时，常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。 2.遇到的问题 1. 用vue-router重新路由到当前页面，页面是不进行刷新的

川长思鸟来/ 2023年02月28日 11:13/ 0 赞/ 2 阅读

相关 vue刷新页面的三种方法

一、使用location对象的reload()方法 reload()方法用于刷新当前文档，类似于你浏览器上的刷新页面按钮。 location.reload();

「爱情、让人受尽委屈。」/ 2023年01月02日 06:30/ 0 赞/ 179 阅读

相关 Vue组建通信的几种方法

组件通信一 —— props和$emit props和$emit 父组件向子组件传递数据用 props 子组件向父组件传递数据用 $emit 父组件

布满荆棘的人生/ 2022年12月18日 06:55/ 0 赞/ 176 阅读

相关 Vue中定义模板的几种方法

指定模板 Vue实例的模板在Vue实例的选项·template·中定义，属性值的本质是一个字符串，如果组件的template过长难以阅读，可以将模板写在script标签中

淩亂°似流年/ 2022年12月04日 01:27/ 0 赞/ 530 阅读

相关 ArcEngine中刷新的几种用法

刷新图层： pMap.PartialRefresh(esriViewGeography, pLayer, null); 刷新所有图层： pMap.Part

妖狐艹你老母/ 2022年08月07日 04:41/ 0 赞/ 287 阅读

相关 JSP刷新页面的几种方法

Javascript刷新页面的几种方法 : 1. history.go(0) 2. location.reload() 3. lo

悠悠/ 2022年07月05日 15:29/ 0 赞/ 411 阅读

相关 Vue动态类的几种使用方法

前言：动态类的操作比较简单，但是很实用。一、点击显示或隐藏样式的做法利用带数据绑定 <button @click="isShow = !isSh

待我称王封你为后i/ 2022年02月24日 05:10/ 0 赞/ 499 阅读

相关前端局部刷新的几种方式

1. 通过img标签请求，实现局部刷新。实现方式向页面插入一个img标签，监听其加载，加载成功则表示请求成功，做出相应的处理；加载补充表示请求补充，也作出相应的处理。

ゝ一纸荒年。/ 2022年01月10日 03:37/ 0 赞/ 1260 阅读