Vue刷新页面的三种方式
我们在写项目的时候,经常会遇到,用户执行完某个动作,改变了某些状态,需要重新刷新页面,以此来重新渲染页面
1.原始方法:
location.reload();
2.vue自带的路由跳转:
this.$router.go(0);
用过的人都知道,前两者都是强制刷新页面,会出现短暂的闪烁,用户体验效果不好。
所以,我们选择第三种方式:
3.首先在App里面写下如下代码:
<template>
<div class="inner" id="app">
<router-view v-if="isReload"></router-view>
</div>
</template>
<script>
export default {
name: 'App',
provide () { // 父组件中通过provide来提供变量,在子组件中通过inject来注入变量
return {
reload: this.reload
}
},
data () {
return {
isReload: true
}
},
methods: {
reload () {
this.isReload = false;
this.$nextTick( () => {
this.isReload = true;
});
}
}
};
</script>
接下来,我们就可以在需要刷新页面的组件里这样写:
export default {
inject: ['reload'],
data () {};
},
在需要刷新页面的代码块中使用:
this.reload();
你学会了吗,参考博客:https://blog.csdn.net/weixin_43885417/article/details/91310674
Vue刷新页面的三种方式的更多相关文章
- 黑马vue---56-58、vue组件创建的三种方式
黑马vue---56-58.vue组件创建的三种方式 一.总结 一句话总结: 不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只能有唯一的一个根元素 1.使用 Vu ...
- js刷新页面的几种方式与区别
Javascript刷新页面的几种方法:1 history.go(0) 2 location.reload() 3 location=location 4 location.assign(locati ...
- Android - 页面返回上一页面的三种方式
今年刚刚跳槽到了新公司,也开始转型做Android,由此开始Android的学习历程. 最近在解很多UI的bug,在解bug过程中,总结了在UI的实现过程中,页面返回上一页面的几种实现方式. 一. 自 ...
- 一个jsp页面引入另一个jsp页面的三种方式 及静态引入和动态引入的区别
转载下, 转载自:http://blog.csdn.net/fn_2015/article/details/70311495 1.第一种:jstl import <c:import url=& ...
- Vue创建组件的三种方式
1.使用 Vue.extend 来创建全局的Vue组件 <div id="app"> <!-- 如果要使用组件,直接,把组件的名称,以 HTML 标签的形式,引入 ...
- vue定义data的三种方式与区别
在vue中,定义data可以有三种写法. 1.第一种写法,对象. var app = new Vue({ el: '#yanggb', data: { yanggb: 'yanggb' } }) 2. ...
- 在一个JSP页面中包含另一个JSP页面的三种方式
转载自://http://blog.163.com/neu_lxb/blog/static/179417010201121343132918/ (1)include指令 includ ...
- php重定向页面的三种方式
PHP页面跳转一.header()函数 header()函数是PHP中进行页面跳转的一种十分简单的方法.header()函数的主要功能是将HTTP协议标头(header)输出到浏览器. header( ...
- vue组件创建的三种方式
1.使用Vue.extend创建全局的Vue组件 //1.1 使用vue.extend创建组件 var com1 = Vue.extend({ //通过template属性指定组件要展示的html结构 ...
随机推荐
- 自动化之SaltStack
一.SaltStack 简介 Salt,,一种全新的基础设施管理方式,部署轻松,在几分钟内可运行起来,扩展性好,很容易管理上万台服务器,速度够快,服务器之间秒级通讯. salt底层采用动态的连接总线, ...
- java中for循环和while循环,哪个更快?--一道面试题
for的 while的
- 图论-网络流-最大流--POJ1273Drainage Ditches(Dinic)
Drainage Ditches Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 91585 Accepted: 3549 ...
- zabbix tigger 设置
设置一个内存在10分钟内持续低于某值才告警: 设置方法: 修改模板的tigger configuration - > Template OS linux Active(选择自己的模板)-&g ...
- 服务器3C直连网络好呢还是3C精品网络更好呢?
3C直连网络:通过用自有AS号与中国电信CTcc,中国联通CUcc,中国移动CMcc企业网进行直接接驳,提供对大陆方向有更高要求的网络接入服务. 简称:国内3c直连. 3C精品专线网:在3C直连基础上 ...
- 使用 Minikube 安装 Kubernetes
概述: 单机低配置主机也可以玩转kubernetes集群.该文章是将介绍使用Minikube安装Kubernetes集群(一般用于本地/开发环境). 配置环境: 硬件:CPU 至少2个核心,至少2.5 ...
- Qt编程基础入门之二
QMainWindow 菜单栏 菜单栏 最多有一个 //菜单栏创建,一个 QMenuBar *menu = new QMenuBar(this); // this->setMenuBar(men ...
- Jmeter系列(11)- 并发线程组Concurrency Thread Group详解
如果你想从头学习Jmeter,可以看看这个系列的文章哦 https://www.cnblogs.com/poloyy/category/1746599.html Concurrency Thread ...
- 【Hadoop离线基础总结】HDFS入门介绍
HDFS入门介绍 概述 HDFS全称为Hadoop Distribute File System,也就是Hadoop分布式文件系统,是Hadoop的核心组件之一. 分布式文件系统是横跨在多台计算机上的 ...
- ysql常用sql语句(12)- group by 分组查询
测试必备的Mysql常用sql语句,每天敲一篇,每次敲三遍,每月一循环,全都可记住!! https://www.cnblogs.com/poloyy/category/1683347.html 前言 ...