vue组件重新加载(刷新)

第一种方法:利用v-if控制router-view,在根组件APP.vue中实现一个刷新方法

<template>
<router-view v-if="isRouterAlive"/>
</template>
<script>
export default {
data () {
return {
isRouterAlive: true
}
},
methods: {
reload () {
this.isRouterAlive = false
this.$nextTick(() => (this.isRouterAlive = true))
}
}
}
</script> 然后其它任何想刷新自己的路由页面,都可以这样:
this.reload()

这种方法可以实现任意组件的刷新。

第二种方法:路由替换

 // replace another route (with different component or a dead route) at first
// 先进入一个空路由
vm.$router.replace({
path: '/_empty',
})
//then replace your route (with same component)
vm.$router.replace({
path: '/student/report',
query: {
'paperId':paperId
}
})

转载自:https://blog.csdn.net/weixin_40054326/article/details/79384433

vue组件重新加载(刷新)的更多相关文章

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

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

  2. vue组件懒加载

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

  3. Vue 组件异步加载(懒加载)

    一.vue的编译模式 (1)路由配置信息 //eg1: const MSite = resolve => require.ensure([], () =>resolve(require([ ...

  4. vue组件懒加载(Load On Demand)

    在Web应用程序中,系统的瓶颈常在于系统的响应速度.如果系统响应速度过慢,用户就会出现埋怨情绪,系统的价值也因此会大打折扣.因此,提高系统响应速度,是非常重要的. 懒加载(Load On Demand ...

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

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

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

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

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

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

  8. Vue按需加载提升用户体验

    Vue官方文档异步组件: 在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载.为了让事情更简单, Vue.js 允许将组件定义为一个工厂函数,动态地解析组件的定义.Vue.js 只在组 ...

  9. vue实现懒加载的几种方法

    vue实现惰性加载是基于: 1.ES6的异步机制 components: { comp: (resolve, reject) => {} } 2. webpack的代码分割功能 require. ...

随机推荐

  1. ubuntu 终端命令颜色的修改

    http://blog.chinaunix.net/uid-13954789-id-3137184.html http://blog.chinaunix.net/uid-26021340-id-348 ...

  2. manacher 算法 这个人确实写得太好了;

    O(n)回文子串(Manacher)算法 资料来源网络 参见:http://www.felix021.com/blog/read.php?2040 问题描述: 输入一个字符串,求出其中最大的回文子串. ...

  3. Hadoop_10_11虚拟机02_虚拟机桥接方式联网【自己的亲测笔记】

    [桥接方式] 说明:自己搭建的时候用的是桥接,因为用的是2两个物理机搭建3台虚拟机所以采用桥接便于三个虚拟机在一个网段,但是不知道对后期有没有影响,目前搭建成功   (1)设置桥接方式 查看本地连接网 ...

  4. bzoj 4595 激光发生器

    bzoj 4595 激光发生器 光线为射线,每次找到与当前光线相交且距离最近的镜子,然后旋转光线. 直线,射线利用线上一点+方向向量的方式表示.旋转时,旋转中心作为线上一点不变,方向向量左乘旋转矩阵. ...

  5. BZOJ1833 ZJOI2010 count 数字计数 【数位DP】

    BZOJ1833 ZJOI2010 count 数字计数 Description 给定两个正整数a和b,求在[a,b]中的所有整数中,每个数码(digit)各出现了多少次. Input 输入文件中仅包 ...

  6. 在 Windows 安装期间将 MBR 磁盘转换为 GPT 磁盘

    以 UEFI 启动的 Windows 磁盘必须是 GPT 格式.本文将介绍如何在安装 Windows 期间将磁盘从 MBR 转换成 GPT. 特别注意:操作不慎可能丢失所有数据,如果你懂得安装系统的一 ...

  7. 如何实现一个可以用 await 异步等待的 Awaiter

    .NET 和 C# 共同给我们带来的 async/await 异步编程模型(TAP)用起来真的很爽.为了实现异步等待,我们只需要在一切能够能够异步等待的方法前面加上 await 即可.能够异步等待的最 ...

  8. python,java操作mysql数据库,数据引擎设置为myisam时能够插入数据,转为innodb时无法插入数据

    今天想给数据库换一个数据引擎,mysiam转为 innodb 结果 python 插入数据时失败,但是自增id值是存在的, 换回mysiam后,又可以插入了~~ 想换php插入试试,结果php数据引擎 ...

  9. 三分钟教你同步 Visual Studio Code 设置

      简介 Visual Studio Code(以下简称vsCode)现在已经渐渐成为前端开发的主力工具,谁让它这么轻便,功能又这么轻便呢.用vscode Coding的小伙伴们也一定会装很多插件吧. ...

  10. (一)Fiddler的介绍和安装

    一.Fiddler的介绍和安装 Fildder是一款免费的web调试代理工具,支持任何浏览器.系统或平台. 官网地址:https://www.telerik.com/fiddler Fiddler原理 ...