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下快速建立跨多个平台的cocos2d-x项目

    原文:http://www.bennyxu.com/archives/462 这里之讲一点就是如何快速的建立起cocos2d-x项目,同时linux平台的优越性也充分的暴露无遗. 这里默认您已经成功的 ...

  2. 使用Linq动态排序

    Linq排序很方便,如果能动态创建Expression再排序就更方便了. 正序还是倒序排列 var order = typeof(Enumerable).GetMember(direction == ...

  3. Git 更安全的强制推送,--force-with-lease

    由于 git rebase 命令的存在,强制将提交推送到远端仓库似乎也有些必要.不过都知道 git push --force 是不安全的,这让 git rebase 命令显得有些鸡肋. 本文将推荐 - ...

  4. 字符编码:ASCII,Unicode和UTF-8

    字符编码是计算机技术的基石,想要熟练使用计算机,就必须懂得一点字符编码的知识. 1. ASCII码 我们知道,在计算机内部,所有的信息最终都表示为一个二进制的字符串.每一个二进制位(bit)有0和1两 ...

  5. altium布局布线原则

    布局应该先放位置确定不能随意变动的,之后是核心器件,然后是周围器件,如果周围器件过多,为防止布线时交叉过多,可以一部分小模块放到底层. 布线时优先顺序为先电源线和网络中使用频率高的线,之后是信号线.走 ...

  6. 【java基础】java集合之HashTable,HashSet,HashMap

    [一]HashSet (1)HashSet内部维护的是一个HashMap,具体原理见java集合之HashMap [二]HashTable (1)HashTable内部维护的是一个Entry的数组.E ...

  7. Python猴子补丁

    属性在运行时的动态替换,叫做猴子补丁(Monkey Patch). 为什么叫猴子补丁 属性的运行时替换和猴子也没什么关系,关于猴子补丁的由来网上查到两种说法: 1,这个词原来为Guerrilla Pa ...

  8. autoconf 简单demo试用

    1. 安装工具 yum install -y automake   2. 基本项目 a. 项目参考结构 ├── AUTHORS ├── COPYING ├── ChangeLog ├── Makefi ...

  9. Openfire源码使用Install4j打包

    https://www.ej-technologies.com/download/install4j/files 下载并安装install4jhttps://www.ej-technologies.c ...

  10. NumPy-快速处理数据--ndarray对象--多维数组的存取、结构体数组存取、内存对齐、Numpy内存结构

    本文摘自<用Python做科学计算>,版权归原作者所有. 上一篇讲到:NumPy-快速处理数据--ndarray对象--数组的创建和存取 接下来接着介绍多维数组的存取.结构体数组存取.内存 ...