vue实现路由不变的情况下,刷新页面操作示例


Posted in Javascript onFebruary 02, 2020

本文实例讲述了vue实现路由不变的情况下,刷新页面操作。分享给大家供大家参考,具体如下:

背景1:在vue写的后台管理项目中,经常会有增、删、改、查的操作,这些操作只是跟用接口跟后台交互下

既然用接口交互,那肯定就是axios的异步请求,那么就是说后台数据发生了改变,但是前台的数据并没有实时的更新(每次操作完后台把列表数据重新返给你例外,但是这样的话每次交互的数据量就偏大了)

背景2:在使用动态路由配置 /detail/:id 这样的情况下,由于 router-view 是复用的,单纯的改变 id 的值并不会刷新 router-view

所以就要想一个办法,让后台执行完操作后,给前台返一个操作结果,然后前台手动刷新页面

一开始我想到的是用 window.location.reload() 或者 this.$router.go(0) 这两个方法,但是后来发现这两个方法会有短暂的白屏时间,用户体验并不太好,所以就放弃了,看了下别人的做法,整理下面两种方法:

一、用中转站的方式

这种方式意思就是让每次操作完成以后,都让路由跳转到这个中转站页面,然后这个页面获取到进来路由的路径再返回去就可以了,这种方式可以作为解决方法之一,普遍用的还是第二种。

二、provide / inject 的方式

这种方式,就是让通过 provide 让 App.vue 为所有子孙页面注入一个 reload 的方法,然后在需要使用的页面,通过 inject 注入即可,代码如下:

App.vue

<template>
 <div id="app">
  <router-view v-if="isRouterAlive"></router-view>
 </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 {
  name: 'children',
  inject: ['reload'],
  data(){
    return {}
  }
  methods: {
    delData(){
      //在axios成功的回调里面
      this.reload();
    }
  }
}

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
javascript引用对象的方法代码
Aug 13 Javascript
Jquery 点击按钮显示和隐藏层的代码
Jul 25 Javascript
10个基于浏览器的JavaScript调试工具分享
Feb 07 Javascript
jQuery判断复选框是否勾选的原理及示例
May 21 Javascript
node.js中的fs.fstatSync方法使用说明
Dec 15 Javascript
全面解析Bootstrap中nav、collapse的使用方法
May 22 Javascript
深入理解JavaScript中为什么string可以拥有方法
May 24 Javascript
javascript实现瀑布流动态加载图片原理
Aug 12 Javascript
jQuery实现页面滚动时智能浮动定位
Jan 08 Javascript
实例详解Node.js 函数
Jun 10 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
Dec 20 Javascript
JS前端使用Canvas快速实现手势解锁特效
Sep 23 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 #jQuery
基于node+vue实现简单的WebSocket聊天功能
Feb 01 #Javascript
基于vue和websocket的多人在线聊天室
Feb 01 #Javascript
node crawler如何添加promise支持
Feb 01 #Javascript
js 计算月/周的第一天和最后一天代码
Feb 01 #Javascript
js获取本日、本周、本月的时间代码
Feb 01 #Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
Feb 01 #Javascript
You might like
PHP字符串word末字符实现大小写互换的方法
2014/11/10 PHP
ThinkPHP在Cli模式下使用模板引擎的方法
2015/09/25 PHP
php简单读取.vcf格式文件的方法示例
2017/09/02 PHP
php实现socket推送技术的示例
2017/12/20 PHP
PHP实现递归的三种方法
2020/07/04 PHP
『jQuery』.html(),.text()和.val()的概述及使用
2013/04/22 Javascript
javascript自然分类法算法实现代码
2013/10/11 Javascript
基于Javascript倒计时效果
2016/12/22 Javascript
angular和BootStrap3实现购物车功能
2017/01/25 Javascript
微信小程序之购物车功能
2020/09/23 Javascript
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
vue2.0 computed 计算list循环后累加值的实例
2018/03/07 Javascript
ES6关于Promise的用法详解
2018/05/07 Javascript
js中null与空字符串&quot;&quot;的区别讲解
2019/01/17 Javascript
原生js实现针对Dom节点的CRUD操作示例
2019/08/26 Javascript
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
详解JavaScript 作用域
2020/07/14 Javascript
Vue中正确使用Element-UI组件的方法实例
2020/10/13 Javascript
JS中箭头函数与this的写法和理解
2021/01/14 Javascript
由浅入深讲解python中的yield与generator
2017/04/05 Python
Python采集代理ip并判断是否可用和定时更新的方法
2018/05/07 Python
python flask web服务实现更换默认端口和IP的方法
2019/07/26 Python
浅谈Python 敏感词过滤的实现
2019/08/15 Python
CentOS7下安装python3.6.8的教程详解
2020/01/03 Python
Python 爬取必应壁纸的实例讲解
2020/02/24 Python
HTML5中实现拖放效果无须借助javascript
2012/12/26 HTML / CSS
HTML5梦幻之旅——炫丽的流星雨效果实现过程
2013/08/06 HTML / CSS
美国第二大连锁书店:Books-A-Million
2017/12/28 全球购物
历史学专业毕业生求职信
2013/09/27 职场文书
汽车驾驶求职信
2013/10/25 职场文书
酒店总经理助理职责
2014/02/12 职场文书
博士生求职信
2014/07/06 职场文书
煤矿隐患排查制度
2015/08/05 职场文书
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python
「月刊Comic Alive」2022年5月号封面公开
2022/03/21 日漫
mysql函数之截取字符串的实现
2022/08/14 MySQL