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 相关文章推荐
地震发生中逃生十大法则
May 12 Javascript
Javascript Select操作大集合
May 26 Javascript
JS获取几种URL地址的方法小结
Feb 26 Javascript
用javascript对一个json数组深度赋值示例
Jul 27 Javascript
使用伪命名空间封装保护独自创建的对象方法
Aug 04 Javascript
JS完成画圆圈的小球
Mar 07 Javascript
CSS3 动画卡顿性能优化的完美解决方案
Sep 20 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
Sep 21 Javascript
webpack中如何使用雪碧图的示例代码
Nov 11 Javascript
详解vue移动端项目代码拆分记录
Mar 15 Javascript
微信小程序自定义组件实现环形进度条
Nov 17 Javascript
vue-quill-editor的使用及个性化定制操作
Aug 04 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+resumablejs实现的分块上传 断点续传功能示例
2017/04/18 PHP
jQuery的实现原理的模拟代码 -2 数据部分
2010/08/01 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
2010/08/07 Javascript
js获取IFRAME当前的URL的方法
2013/11/13 Javascript
js中一个函数获取另一个函数返回值问题探讨
2013/11/21 Javascript
Javascript Object 对象学习笔记
2014/12/17 Javascript
JS实现单行文字不间断向上滚动的方法
2015/01/29 Javascript
JavaScript中join()方法的使用简介
2015/06/09 Javascript
js实现鼠标点击文本框自动选中内容的方法
2015/08/20 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
2015/11/11 Javascript
jQuery多文件异步上传带进度条实例代码
2016/08/16 Javascript
值得学习的bootstrap fileinput文件上传工具
2016/11/08 Javascript
如何提高数据访问速度
2016/12/26 Javascript
Node.js中多进程模块Cluster的介绍与使用
2017/05/27 Javascript
详解vue2父组件传递props异步数据到子组件的问题
2017/06/29 Javascript
基于react后端渲染模板引擎noox发布使用
2018/01/11 Javascript
JavaScript实现选项卡效果的分析及步骤
2019/04/16 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
2019/05/09 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
2019/06/18 jQuery
Python中字典(dict)合并的四种方法总结
2017/08/10 Python
python实现动态数组的示例代码
2019/07/15 Python
python读取图片的几种方式及图像宽和高的存储顺序
2020/02/11 Python
python判断一个变量是否已经设置的方法
2020/08/13 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
HTML5+CSS3实现拖放(Drag and Drop)示例
2014/07/07 HTML / CSS
24岁生日感言
2014/01/13 职场文书
简单的辞职信范文
2014/01/18 职场文书
搞笑爱情保证书
2014/04/29 职场文书
2014年项目经理工作总结
2014/11/24 职场文书
2014年乡镇民政工作总结
2014/12/02 职场文书
无锡灵山大佛导游词
2015/02/09 职场文书
建党伟业电影观后感
2015/06/01 职场文书
捐款仪式主持词
2015/07/04 职场文书
学生会副主席竞选稿
2015/11/19 职场文书
Shell脚本一键安装Nginx服务自定义Nginx版本
2022/03/20 Servers
JavaScript设计模式之原型模式详情
2022/06/21 Javascript