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 相关文章推荐
分享一个asp.net pager分页控件
Jan 04 Javascript
运算符&amp;&amp;的三个不同层次
Apr 07 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
Dec 25 Javascript
js弹出确认是否删除对话框
Mar 27 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
May 11 Javascript
jQuery中last()方法用法实例
Jan 06 Javascript
JavaScript实现在页面间传值的方法
Apr 07 Javascript
javascript格式化日期时间方法汇总
Jun 19 Javascript
JavaScript每天定时更换皮肤样式的方法
Jul 01 Javascript
jquery横向纵向鼠标滚轮全屏切换
Feb 27 Javascript
关于vue表单提交防双/多击的例子
Oct 31 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
Jan 08 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不用正则验证真假身份证
2013/11/06 PHP
CI(CodeIgniter)框架中的增删改查操作
2014/06/10 PHP
PHP中的替代语法简介
2014/08/22 PHP
PHP大文件及断点续传下载实现代码
2020/08/18 PHP
在IE浏览器中resize事件执行多次的解决方法
2011/07/12 Javascript
javascript中的void运算符语法及使用介绍
2013/03/10 Javascript
JavaScript中number转换成string介绍
2014/12/31 Javascript
JavaScript实现搜索框的自动完成功能(一)
2016/02/25 Javascript
浅析JavaScript中命名空间namespace模式
2016/06/22 Javascript
如何使用Vuex+Vue.js构建单页应用
2016/10/27 Javascript
javascript防篡改对象实例详解
2017/04/10 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
详解AngularJS之$window窗口对象
2018/01/17 Javascript
fullpage.js最后一屏滚动方式
2018/02/06 Javascript
JavaScript错误处理操作实例详解
2019/01/04 Javascript
uni-app之APP和小程序微信授权方法
2019/05/09 Javascript
微信小程序canvas开发水果老虎机的思路详解
2020/02/07 Javascript
python通过cookie模拟已登录状态的初步研究
2016/11/09 Python
python生成不重复随机数和对list乱序的解决方法
2018/04/09 Python
在PyCharm下打包*.py程序成.exe的方法
2018/11/29 Python
Python Datetime模块和Calendar模块用法实例分析
2019/04/15 Python
Python闭包与装饰器原理及实例解析
2020/04/30 Python
keras.utils.to_categorical和one hot格式解析
2020/07/02 Python
python3实现语音转文字(语音识别)和文字转语音(语音合成)
2020/10/14 Python
基于 HTML5 Canvas实现 的交互式地铁线路图
2018/03/05 HTML / CSS
澳大利亚在线消费电子产品商店:TobyDeals
2020/01/05 全球购物
一套英文Java笔试题面试题
2016/04/21 面试题
初三开学计划书
2014/04/27 职场文书
家长学校培训材料
2014/08/20 职场文书
2014年科普工作总结
2014/12/06 职场文书
2015年财政局工作总结
2015/05/21 职场文书
培训计划通知
2015/07/15 职场文书
redis实现共同好友的思路详解
2021/05/26 Redis
MySQL8.0.18配置多主一从
2021/06/21 MySQL
Python极值整数的边界探讨分析
2021/09/15 Python
HTML中link标签属性的具体用法
2023/05/07 HTML / CSS