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 相关文章推荐
网上抓的一个特效
May 11 Javascript
30个最好的jQuery 灯箱插件分享
Apr 25 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
Dec 20 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
Apr 12 Javascript
JavaScript获得url查询参数的方法
Jul 02 Javascript
jQuery简单实现上下,左右滑动的方法
Jun 01 Javascript
jQuery读取XML文件的方法示例
Feb 03 Javascript
angularjs实现搜索的关键字在正文中高亮出来
Jun 13 Javascript
前端跨域的几种解决方式总结(推荐)
Aug 16 Javascript
使用vue.js在页面内组件监听scroll事件的方法
Sep 11 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
Oct 12 Javascript
JavaScript Dom实现轮播图原理和实例
Feb 19 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 SQL之where语句生成器
2009/03/24 PHP
php 正则表达式小结
2009/08/31 PHP
ThinkPHP实现多数据库连接的解决方法
2014/07/01 PHP
遍历指定目录,并存储目录内所有文件属性信息的php代码
2016/10/28 PHP
php 判断页面或图片是否经过gzip压缩的方法
2017/04/05 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
2020/02/07 PHP
flash 得到自身url参数的代码
2009/11/15 Javascript
JavaScript 利用Cookie记录用户登录信息
2009/12/08 Javascript
javascript 单例/单体模式(Singleton)
2011/04/07 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
2012/05/23 Javascript
不使用浏览器运行javascript代码的方法
2013/07/24 Javascript
javascript字符串替换函数如何一次性全部替换掉
2015/10/30 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
2016/05/13 Javascript
利用Javascript仿Excel的数据透视分析功能
2016/09/07 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
微信小程序使用modal组件弹出对话框功能示例
2017/11/29 Javascript
详解NODEJS的http实现
2018/01/04 NodeJs
详解JavaScript的BUG和错误
2018/05/07 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
2019/10/27 Javascript
JavaScript接口实现方法实例分析
2020/05/16 Javascript
[03:04]DOTA2超级联赛专访ZSMJ “莫名其妙”的逆袭
2013/05/23 DOTA
Python基于动态规划算法计算单词距离
2015/07/25 Python
CentOS6.5设置Django开发环境
2016/10/13 Python
python 计算一个字符串中所有数字的和实例
2019/06/11 Python
python中urllib.request和requests的使用及区别详解
2020/05/05 Python
python根据用户需求输入想爬取的内容及页数爬取图片方法详解
2020/08/03 Python
实例教程 一款纯css3实现的数字统计游戏
2014/11/10 HTML / CSS
初探CSS3中的calc()功能
2015/07/14 HTML / CSS
HTML5中外部浏览器唤起微信分享
2020/01/02 HTML / CSS
LVMH旗下最大的奢侈品网站平台:24S
2020/05/24 全球购物
优秀共产党员先进事迹
2014/01/27 职场文书
工商管理本科生求职信
2014/07/13 职场文书
英语课外活动总结
2014/08/27 职场文书
微信小程序实现录音Record功能
2021/05/09 Javascript