Vue项目路由刷新的实现代码


Posted in Javascript onApril 17, 2019

当vue单页面需要替换参数并刷新页面时,这个时候使用this.$router.push或this.$router.replace会发现路由改变了,但是页面上的数据并没有实时刷新。在网上找到了以下几种方法,亲测可用:

this.$router.go(0)

在具体页面中,先通过this.$router.push或this.$router.replace替换路由,随后调用this.$router.go(0),页面就会强制刷新,但是该强制刷新与F5刷新效果类似,页面会有空白时间,体验感不好;

provide/inject

首先在app.vue页面中增加如下配置:

<template>
 <div id="app">
  <router-view v-if="isRouterAlive" />
 </div>
</template>

<script>
export default {
 name: 'App',
 data() {
  return {
   isRouterAlive: true
  }
 },
 provide() {
  return {
   reload: this.reload
  }
 },
 methods: {
  reload() {
   this.isRouterAlive = false
   this.$nextTick(() => {
    this.isRouterAlive = true
   })
  }
 }
}
</script>

然后在具体页面中加上inject配置,具体如下:

export default {
  name: 'orderAndRandom',
  
  // 就是下面这行
  inject: ['reload'],
  data() {},
  
  // 省略
 }

加上配置后,在调用this.$router.push或this.$router.replace替换路由后,再新增this.reload()就可以实现页面内数据刷新。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Dojo之路:如何利用Dojo实现Drag and Drop效果
Apr 10 Javascript
Jquery 表单取值赋值的一些基本操作
Oct 11 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
Jan 06 Javascript
js关闭父窗口时关闭子窗口
Apr 01 Javascript
jQuery javaScript捕获回车事件(示例代码)
Nov 07 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
Jun 30 Javascript
Javascript this 关键字 详解
Oct 22 Javascript
原生js实现弹出层登录拖拽功能
Dec 05 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
Jan 21 Javascript
React中嵌套组件与被嵌套组件的通信过程
Jul 11 Javascript
js实现踩五彩块游戏
Feb 08 Javascript
vue 自定义组件添加原生事件
Apr 21 Vue.js
vue cli 3.x 项目部署到 github pages的方法
Apr 17 #Javascript
详解vue开发中调用微信jssdk的问题
Apr 16 #Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
Apr 16 #Javascript
vue微信分享的实现(在当前页面分享其他页面)
Apr 16 #Javascript
在Vue项目中使用snapshot测试的具体使用
Apr 16 #Javascript
vue.js中使用echarts实现数据动态刷新功能
Apr 16 #Javascript
详解vue-cli 脚手架 安装
Apr 16 #Javascript
You might like
php木马攻击防御之道
2008/03/24 PHP
简单谈谈php中ob_flush和flush的区别
2014/11/27 PHP
php curl中gzip的压缩性能测试实例分析
2016/11/08 PHP
Web版彷 Visual Studio 2003 颜色选择器
2007/01/09 Javascript
JavaScript闭包实例讲解
2014/04/22 Javascript
JS实现页面超时后自动跳转到登陆页面
2015/01/19 Javascript
javascript中checkbox使用方法简单实例演示
2015/11/17 Javascript
JavaScript数据结构与算法之集合(Set)
2016/01/29 Javascript
jQuery UI Bootstrap是什么?
2016/06/17 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
nodejs获取微信小程序带参数二维码实现代码
2017/04/12 NodeJs
详谈for循环里面的break和continue语句
2017/07/20 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
2018/10/23 Javascript
Vue Element UI + OSS实现上传文件功能
2019/07/31 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
2019/10/14 Javascript
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
javascript实现简单搜索功能
2020/03/26 Javascript
[01:43]深扒TI7聊天轮盘语音出处4
2017/05/11 DOTA
[48:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 VG vs KG
2018/03/31 DOTA
[01:33:14]LGD vs VP Supermajor 败者组决赛 BO3 第二场 6.10
2018/07/04 DOTA
[01:28:44]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第一场 1月10日
2021/03/11 DOTA
python基于multiprocessing的多进程创建方法
2015/06/04 Python
Python 由字符串函数名得到对应的函数(实例讲解)
2017/08/10 Python
Python内置函数—vars的具体使用方法
2017/12/04 Python
python使用KNN算法手写体识别
2018/02/01 Python
django 类视图的使用方法详解
2019/07/24 Python
Python利用多线程同步锁实现多窗口订票系统(推荐)
2019/12/22 Python
Python使用paramiko连接远程服务器执行Shell命令的实现
2021/03/04 Python
波兰快递服务:Globkurier.pl
2019/11/08 全球购物
怎样比较两个类型为String的字符串
2016/08/17 面试题
应届生求职推荐信
2013/10/28 职场文书
一份报关员的职业规划范文
2014/01/08 职场文书
大学生优秀班干部事迹材料
2014/05/26 职场文书
亲子阅读的活动方案
2014/08/15 职场文书
瘦西湖导游词
2015/02/03 职场文书