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 相关文章推荐
JavaScript QueryString解析类代码
Jan 17 Javascript
禁用页面部分JavaScript不是全部而是部分
Sep 03 Javascript
JavaScript简介
Feb 15 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
Mar 13 Javascript
JavaScript初学者必看“new”
Jun 12 Javascript
简单实现js上传文件功能
Aug 21 Javascript
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
Vue cli+mui 区域滚动的实例代码
Jan 25 Javascript
element-ui 关于获取select 的label值方法
Aug 24 Javascript
详解React项目中碰到的IE问题
Mar 14 Javascript
vue仿ios列表左划删除
Sep 26 Javascript
vue+webpack 更换主题N种方案优劣分析
Oct 28 Javascript
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实现多级树型菜单
2006/10/09 PHP
如何解决PHP获取不到SESSION信息之一般情况
2019/10/10 PHP
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
2009/05/21 Javascript
ie focus bug 解决方法
2009/09/03 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
javascript中直接写php代码的方法
2013/07/31 Javascript
Javascript获取HTML静态页面参数传递值示例
2013/08/18 Javascript
Javascript中匿名函数的多种调用方式总结
2013/12/06 Javascript
Javascript中浏览器窗口的基本操作总结
2016/08/18 Javascript
Node.JS利用PhantomJs抓取网页入门教程
2017/05/19 Javascript
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
2018/10/18 Javascript
基于node简单实现RSA加解密的方法步骤
2019/03/21 Javascript
使用JS来动态操作css的几种方法
2019/12/18 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
2020/04/28 Javascript
Vue3.0的优化总结
2020/10/16 Javascript
[01:04:32]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第二场 2月23日
2021/03/11 DOTA
Django框架中数据的连锁查询和限制返回数据的方法
2015/07/17 Python
用virtualenv建立多个Python独立虚拟开发环境
2017/07/06 Python
Python编程深度学习绘图库之matplotlib
2018/12/28 Python
Python如何爬取微信公众号文章和评论(基于 Fiddler 抓包分析)
2019/06/28 Python
Django与pyecharts结合的实例代码
2020/05/13 Python
玉兰油美国官网:OLAY美国
2018/10/25 全球购物
西班牙在线光学:Visual-Click
2020/06/22 全球购物
英国领先的餐饮折扣俱乐部:Gourmet Society
2020/07/26 全球购物
医药专业推荐信
2013/11/15 职场文书
四好少年事迹材料
2014/01/12 职场文书
医院院务公开实施方案
2014/05/03 职场文书
九一八事变演讲稿
2014/09/05 职场文书
2015年元旦促销方案书
2014/12/09 职场文书
邀请书格式范文
2015/02/02 职场文书
敬老院义诊活动总结
2015/05/07 职场文书
2015年财政局工作总结
2015/05/21 职场文书
音乐会主持人开场白
2015/05/28 职场文书
PHP策略模式写法
2021/04/01 PHP
Python实现机器学习算法的分类
2021/06/03 Python