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 组件之旅(三):用 Ant 构建组件
Oct 28 Javascript
纯CSS打造的导航菜单(附jquery版)
Aug 07 Javascript
THREE.JS入门教程(2)着色器-上
Jan 24 Javascript
随窗体滑动的小插件sticky源码
Jun 21 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
Aug 07 Javascript
动态的9*9乘法表效果的实现代码
May 16 Javascript
js和C# 时间日期格式转换的简单实例
May 28 Javascript
Node.js中常规的文件操作总结
Oct 13 Javascript
Vue header组件开发详解
Jan 26 Javascript
微信公众号开发之微信支付代码记录的实现
Oct 16 Javascript
vue+element树组件 实现树懒加载的过程详解
Oct 21 Javascript
在Vue中使用Select选择器拼接label的操作
Oct 22 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 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
Erlang的运算符(比较运算符,数值运算符,移位运算符,逻辑运算符)
2012/07/23 PHP
LINUX下PHP程序实现WORD文件转化为PDF文件的方法
2016/05/13 PHP
php使用高斯算法实现图片的模糊处理功能示例
2016/11/11 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
基于jquery的direction图片渐变动画效果
2010/05/24 Javascript
Jquery插件之多图片异步上传
2010/10/20 Javascript
formValidator3.3的ajaxValidator一些异常分析
2011/07/12 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
2012/12/19 Javascript
使用 stylelint检查CSS_StyleLint
2016/04/28 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
js利用正则表达式检验输入内容是否为网址
2016/07/05 Javascript
微信小程序之仿微信漂流瓶实例
2016/12/09 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
2017/01/19 Javascript
详解前后端分离之VueJS前端
2017/05/24 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
2017/11/02 Javascript
命令行批量截图Node脚本示例代码
2019/01/25 Javascript
Vue关于组件化开发知识点详解
2020/05/13 Javascript
Vue环境搭建+VSCode+Win10的详细教程
2020/08/19 Javascript
[53:10]Secret vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
解决pycharm 误删掉项目文件的处理方法
2018/10/22 Python
Python第三方Window模块文件的几种安装方法
2018/11/22 Python
应用OpenCV和Python进行SIFT算法的实现详解
2019/08/21 Python
Python-opencv 双线性插值实例
2020/01/17 Python
python如何代码集体右移
2020/07/20 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
Django静态文件加载失败解决方案
2020/08/26 Python
Python操作PostgreSql数据库的方法(基本的增删改查)
2020/12/29 Python
Molton Brown美国官网:奢华美容、香水、沐浴和身体护理
2020/09/02 全球购物
优秀求职信范文分享
2013/12/19 职场文书
奥巴马竞选演讲稿
2014/05/15 职场文书
文明社区申报材料
2014/08/21 职场文书
大学生第一学年自我鉴定
2014/09/12 职场文书
假期读书倡议书3篇
2019/08/19 职场文书
MySQL命令无法输入中文问题的解决方式
2021/08/30 MySQL