遇到问题的场景:
需要把当前组件完全还原成初始化状态,不要页面全部刷新
例如:重置按钮,只刷新当前加载组件
其他办法:
使用vue-router重新定向到当前页面,页面不刷新
使用window-reload() 页面全部刷新,用户体验太差

解决方法:
使用v-if provide inject和this.$nextTick()【版本限制 vue2.2.0】

原理:
使用v-if控制router-view的显示或隐藏(v-if会把事件监听器和自组件适当的销毁或者重建)
使用provide / inject组合解决自组件层级比较深的问题
使用this.$nextTick()实现页面异步刷新

provide / inject
就是父组件中使用provide提供变量(对象或者是一个函数),在子组件中通过inject来注入变量
不管层级有多深,并在起上下游关系成立的时间始终生效

this.$nextTick()
当dom发生变化,更新后执行的回调

实际代码:
在App.vue里面,声明reload方法,然后通过provide把reload方法注入,使用bol值控制router-view隐藏(销毁),再通过this.$nextTick()在dom更新之后利用bol控制router-view重新加载,实现页面刷新的效果

<template>
  <div id="app">
    <router-view v-if="isRouterShow"/>
  </div>
</template>
<script>
export default {
  name: 'App',
  provide () {
    return {
      reload: this.reload
    }
  },
  data () {
    return {
      isRouterShow: true
    }
  },
  methods: {
    async reload () {
      this.isRouterShow = false
      await this.$nextTick()
      this.isRouterShow = true
    }
  }
}
</script>

在子组件里面
使用inject注入App.vue提供的reload依赖,然后在需要的地方直接调用this.reload()方法即可

export default {
  inject: ['reload'],
watch: {
'$route.query.index'(){
this.reload()
}
}
 }

当路由从

door?index=0&dateName=normal

变到如下情况时,就会重载当前页面

door?index=1&dateName=normal

这样在路由变化的时候,就会更新当前页面了

Vue提倡数据驱动dom,但是存在特殊情况,如果有更好的解决方法,请多多指教!

「Vue系列」之Vue2实现当前组件重新加载的更多相关文章

  1. vue2组件懒加载浅析

    vue2组件懒加载浅析 一. 什么是懒加载 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. 二.为什么需要懒加载 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大, ...

  2. vue组件懒加载

    vue2组件懒加载浅析 一. 什么是懒加载 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. 二.为什么需要懒加载 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大, ...

  3. 前端性能优化成神之路--vue组件懒加载(Vue Lazy Component )

    ---恢复内容开始--- 使用组件懒加载的原因 我们先来看看这样的一个页面,页面由大量模块组成,所有模块是同时进行加载,模块中图片内容较多,每个模块的依赖资源较多(包括js文件.接口文件.css文件等 ...

  4. vue组件重新加载(刷新)

    vue组件重新加载(刷新) 第一种方法:利用v-if控制router-view,在根组件APP.vue中实现一个刷新方法 <template> <router-view v-if=& ...

  5. vue路由懒加载及组件懒加载

    一.为什么要使用路由懒加载 为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题. 二.定义 懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载. 三.使用 常用的懒加载方式 ...

  6. Vue 路由&组件懒加载(按需加载)

    当打包构建应用时,Javascript 包会变得非常大,影响页面加载速度.使用Vue路由懒加载和组件懒加载可以提升页面加载速度,减少白屏时间,提升用户体验. 用法有如下三种:(路由懒加载与组件懒加载用 ...

  7. vue第七单元(vue的单文件组件形式-单文件组件的加载原理-vue-cli构建的开发环境以及生命周期)

    第七单元(vue的单文件组件形式-单文件组件的加载原理-vue-cli构建的开发环境以及生命周期) #课程目标 掌握安装 vue-cli 命令行工具的方法,掌握使用命令行在本地搭建开发环境,使用命令行 ...

  8. VUE的路由懒加载及组件懒加载

    一,为什么要使用路由懒加载 为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题 二,懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载 三,常用的懒加载方式有两种:即使用v ...

  9. 「vue基础」一篇浅显易懂的 Vue 路由使用指南( Vue Router 下)

    大家好,在上一篇系列文章里,我们一起学习了路由的基本配置,如何创建路由和传参,本篇文章我们一起学习下 Navigation 导航和路由守卫的相关内容. Navigation 如果要改变当前路径,我们可 ...

  10. 「Vue.js」Vue-Router + Webpack 路由懒加载实现

    一.前言 当打包构建应用时,Javascript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了.结合 Vue ...

随机推荐

  1. 英码科技边缘计算智慧工地解决方案——给工地戴上AI“安全帽”

    据统计显示,2021年全国共发生房屋市政工程生产安全事故734起,死亡840人:且近3年来,工地事故数量.死亡人数连续攀升.这不仅仅是一个普通的数字,每个数字都代表一个独特.鲜活的生命.为什么每年会发 ...

  2. win10修复系统

    DISM.exe /Online /Cleanup-image /Restorehealth sfc /scannow

  3. JS判断数据类型的4种方法

    4种判断方法分别是: typeof instanceof prototype属性 constructor属性 可判断的类型对比如下图: 实践代码如下: 1 // 构造函数名方法 2 function ...

  4. 引用本地的layUI

    <script src="/public/vendor/layui-v2.5.6/layui.all.js"></script>

  5. git Permission denied, please try again.

    博主在github上下载tiny face的的源代码的时候,遇到git clone命令为:git clone --recursive git@github.com:peiyunh/tiny.git 而 ...

  6. 网络安全(中职组)-B模块:Web隐藏信息获取

    Web隐藏信息获取任务环境说明:服务器场景名:web20200604服务器场景用户名:未知(关闭链接) 1.    通过本地PC中渗透测试平台Kali使用Nmap扫描目标靶机HTTP服务子目录,将扫描 ...

  7. golang中关于死锁的思考与学习

    1.Golang中死锁的触发条件 1.1 书上关于死锁的四个必要条件的讲解 发生死锁时,线程永远不能完成,系统资源被阻碍使用,以致于阻止了其他作业开始执行.在讨论处理死锁问题的各种方法之前,我们首先深 ...

  8. WPF监听快捷键的几种方式

    调用Win32 API(优先级最高,全局监听, 支持最小化失焦等情况) 那么,假如我要在一个WPF程序监听CTRL+5按键,首先在主窗口程序添加以下代码: /// <summary> // ...

  9. SpringBoot 整合 Avro 与 Kafka

    更多内容,前往IT-BLOG [需求]:生产者发送数据至 kafka 序列化使用 Avro,消费者通过 Avro 进行反序列化,并将数据通过 MyBatisPlus 存入数据库. 一.环境介绍 [1] ...

  10. ElasticSearch 实现分词全文检索 - SpringBoot 完整实现 Demo 附源码【完结篇】

    可以先看下列文章 目录 ElasticSearch 实现分词全文检索 - 概述 ElasticSearch 实现分词全文检索 - ES.Kibana.IK安装 ElasticSearch 实现分词全文 ...