vue.js刷新当前页面的实例讲解


Posted in Python onDecember 29, 2020

在我们修改过页面的某些数据后,通过想要把页面刷新一下,看看修改后的结果。由于vue的存在,页面是不会自动刷新的,需要我们手动进行操作。在vue里有三种刷新方法,最推荐的就是组合控制法,另外另种方法也会分享给大家学习,下面我们一起来看看vue如何刷新页面吧。

1.强制刷新

window.location.reload()

原生 js 提供的方法;

this.$router.go(0),vue 路由里面的一种方法;

这两种方法都可以达到页面刷新的目的,简单粗暴,但是用户体验不好,相当于按 F5 刷新页面,页面的重新载入,会有短暂的白屏。

2.伪造刷新

通过路由跳转的方法刷新,具体思路是点击按钮跳转一个空白页,然后再马上跳回来

// index.vue 首页
this.$router.replace('/empty')
// empty.vue 空白页
created() {
  this.$router.replace('/')
}

3.使用provide / inject组合控制的显示

vue官方说明中允许一个祖先组件通过设置provide/inject向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。provide/inject 是解决组件之间的通信问题的利器,不受层级结构的限制。

在项目中修改app.vue文件:

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

注入依赖:

export default {
 inject:['reload'], //注入依赖
 name: "CompanyConfigure",
 data() {
  return {... ...

调用:

this.reload();

到此这篇关于vue.js刷新当前页面的实例讲解的文章就介绍到这了,更多相关vue.js刷新当前页面内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Python 相关文章推荐
python的三目运算符和not in运算符使用示例
Mar 03 Python
python计算对角线有理函数插值的方法
May 07 Python
python3实现全角和半角字符转换的方法示例
Sep 21 Python
Python学生信息管理系统修改版
Mar 13 Python
利用Python实现在同一网络中的本地文件共享方法
Jun 04 Python
python中的turtle库函数简单使用教程
Jul 23 Python
Python函数参数匹配模型通用规则keyword-only参数详解
Jun 10 Python
python中break、continue 、exit() 、pass终止循环的区别详解
Jul 08 Python
Python3 Tkinkter + SQLite实现登录和注册界面
Nov 19 Python
Python中如何将一个类方法变为多个方法
Dec 30 Python
python操作yaml说明
Apr 08 Python
Python基于pyjnius库实现访问java类
Jul 31 Python
Python实现对word文档添加密码去除密码的示例代码
Dec 29 #Python
利于python脚本编写可视化nmap和masscan的方法
Dec 29 #Python
Python基于mediainfo批量重命名图片文件
Dec 29 #Python
用python批量下载apk
Dec 29 #Python
python如何调用php文件中的函数详解
Dec 29 #Python
详解Open Folder as PyCharm Project怎么添加的方法
Dec 29 #Python
pycharm如何设置官方中文(如何汉化)
Dec 29 #Python
You might like
php中文字符截取防乱码
2008/03/28 PHP
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
PHP中mysqli_affected_rows作用行数返回值分析
2014/12/26 PHP
关于laravel 数据库迁移中integer类型是无法指定长度的问题
2019/10/09 PHP
jQuery 添加/移除CSS类实现代码
2010/02/11 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
2014/04/23 Javascript
jQuery实现视频作为全屏幕背景
2014/12/18 Javascript
JS限制文本框只能输入数字和字母方法
2015/02/28 Javascript
详解参数传递四种形式
2015/07/21 Javascript
Javascript数组Array基础介绍
2016/03/13 Javascript
深入理解JavaScript中为什么string可以拥有方法
2016/05/24 Javascript
Angular使用ng-messages与PHP进行表单数据验证
2016/12/28 Javascript
PHP实现记录代码运行时间封装类实例教程
2017/05/08 Javascript
nodejs 最新版安装npm 的使用详解
2018/01/18 NodeJs
移动端手指操控左右滑动的菜单
2019/09/08 Javascript
Layui Form 自定义验证的实例代码
2019/09/14 Javascript
Python实现的检测web服务器健康状况的小程序
2014/09/17 Python
Python操作列表之List.insert()方法的使用
2015/05/20 Python
利用python爬取散文网的文章实例教程
2017/06/18 Python
python实现傅里叶级数展开的实现
2018/07/21 Python
windows下cx_Freeze生成Python可执行程序的详细步骤
2018/10/09 Python
基于python全局设置id 自动化测试元素定位过程解析
2019/09/04 Python
python super用法及原理详解
2020/01/20 Python
pygame实现飞机大战
2020/03/11 Python
利用Python的folium包绘制城市道路图的实现示例
2020/08/24 Python
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
2012/06/04 HTML / CSS
strlen的几种不同实现方法
2013/05/31 面试题
介绍一下游标
2012/01/10 面试题
数据库测试通常都包括哪些方面
2015/11/30 面试题
企业办公室岗位职责
2014/03/12 职场文书
财务总监岗位职责
2015/02/03 职场文书
无工作证明怎么写
2015/06/15 职场文书
办公室管理规章制度
2015/08/04 职场文书
MySQL系列之四 SQL语法
2021/07/02 MySQL
如何使用SQL Server语句创建表
2022/04/12 SQL Server
css弧边选项卡的项目实践
2023/05/07 HTML / CSS