Vue实现页面的局部刷新

谁践踏了优雅 2021-07-25 13:03 560阅读 0赞

1. 首先需要修改App.vue

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

App.vue

<template>
      <div id="app">
        <router-view v-if="isRouterAlive"/>
      </div>
    </template>
    <script>
    export default {
      provide(){
        return{
          reload:this.reload
        }
      },
      data(){
        return{
          isRouterAlive:true
        }
      },
      methods:{
        reload(){
          this.isRouterAlive=false;
          this.$nextTick(function(){
            this.isRouterAlive=true
          })
        }
      }
    }
    </script>

2. 到需要刷新的页面进行引用，使用inject导入引用reload，然后直接调用即可

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/92bb07227a1a46fd89e3b4193cb987e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: /images/20210725/e9a5bb15957047f684bc5bdbf4321a8d.png

发表评论取消回复

表情：

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

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

相关阅读

相关 Vue实现组件的局部刷新

Vue实现组件的局部刷新通过v-if Vue中我们不可避免的需要调用来自各个方面的组件：奇奇怪怪的组件增加了！这个时候有个问题：我从后端传来的数据给

快来打我*/ 2023年02月13日 11:11/ 0 赞/ 1 阅读

相关 vue 实现局部组件刷新

在 vue 项目里想实现组件的局部刷新，我用到过的方法整理了一下： 1、 provide / inject 方法使用 v-if 方法来控制 router-view 的

我不是女神ヾ/ 2023年01月03日 04:57/ 0 赞/ 250 阅读

相关 Vue实现页面的局部刷新（router-view页面刷新）

[https://blog.csdn.net/a5252145/article/details/102745598?utm\_medium=distribute.pc\_rel

港控/mmm°/ 2022年12月22日 11:23/ 0 赞/ 429 阅读

相关 easyUI dataGrid页面实现局部刷新

我们在修改状态的时候往往希望是点击一个按钮，然后状态改变其他东西不变，其实很简单使用ajax提交数据，成功后加上一句话就可以了。 $('teacherDataGri

梦里梦外;/ 2022年06月01日 12:27/ 0 赞/ 801 阅读

相关使用AjaxAnywhere实现页面局部刷新

前言页面局部刷新是日常工作中使用的很多的功能，通常会借助jQuery的load/get/post/ajax方法，或者使用jquery.form.js的ajaxSubmi

落日映苍穹つ/ 2022年05月14日 01:30/ 0 赞/ 367 阅读

相关 HTML页面局部刷新的实现代码

> 小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大

系统管理员/ 2022年04月25日 00:32/ 0 赞/ 571 阅读

相关 HTML页面局部刷新的实现代码

事件响应刷新：有请求才会刷新 1、通过JS HTML DOM或jQuery获取HTML元素，通过DOM方法或jQuery方法监听页面事件，获取用户请求； 2、通过Aja

桃扇骨/ 2021年11月01日 18:40/ 0 赞/ 725 阅读

相关 HTML页面局部刷新的实现代码

事件响应刷新：有请求才会刷新 1、通过JS HTML DOM或jQuery获取HTML元素，通过DOM方法或jQuery方法监听页面事件，获取用户请求； 2、通过Aja

雨点打透心脏的1/2处/ 2021年11月01日 18:16/ 0 赞/ 558 阅读

相关 Vue实现页面的局部刷新

1. 首先需要修改App.vue ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

谁践踏了优雅/ 2021年07月25日 13:03/ 0 赞/ 561 阅读

相关页面局部刷新

场景：页面A使用第三方插件C，如果页面刷新，C会重新初始化并且无法记录之前的信息。现在希望页面的主要功能区B刷新，但是C的信息不要丢失。解决方案：B采用iframe方式...

红太狼/ 2020年06月23日 17:35/ 0 赞/ 1119 阅读