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 相关文章推荐
js内置对象 学习笔记
Aug 01 Javascript
js取滚动条的尺寸的函数代码
Nov 30 Javascript
javascript实现在线客服效果
Jul 15 Javascript
浅谈javascript中replace()方法
Nov 10 Javascript
JavaScript实现瀑布流布局
Jun 28 Javascript
Bootstrap布局组件应用实例讲解
Feb 17 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 Javascript
详解jQuery中的事件
Dec 14 Javascript
Vue2组件tree实现无限级树形菜单
Mar 29 Javascript
jQuery validata插件实现方法
Jun 25 jQuery
eslint 的三大通用规则详解
May 16 Javascript
基于Vue中使用节流Lodash throttle详解
Oct 30 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
图形数字验证代码
2006/10/09 PHP
php实现获取文件mime类型的方法
2015/02/11 PHP
PHP实现适用于自定义的验证码类
2016/06/15 PHP
PHP+mysql+ajax轻量级聊天室实现方法详解
2016/10/17 PHP
微信第三方登录(原生)demo【必看篇】
2017/05/26 PHP
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
2007/06/02 Javascript
jquery 单击li防止重复加载的实现代码
2010/12/24 Javascript
javascript同页面多次调用弹出层具体实例代码
2013/08/16 Javascript
在JS中如何调用JSP中的变量
2014/01/22 Javascript
Google官方支持的NodeJS访问API,提供后台登录授权
2014/07/29 NodeJs
jQuery实现信息提示框(带有圆角框与动画)效果
2015/08/07 Javascript
Javascript闭包实例详解
2015/11/29 Javascript
Node.js中npm常用命令大全
2016/06/09 Javascript
解析浏览器端的AJAX缓存机制
2016/06/21 Javascript
D3.js实现饼状图的方法详解
2016/09/21 Javascript
vue.js中过滤器的使用教程
2017/06/08 Javascript
简单谈谈关于Angular Cli打包的事
2017/09/05 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
2018/09/02 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
2019/02/20 Javascript
送你43道JS面试题(收藏)
2019/06/17 Javascript
Vue商品控件与购物车联动效果的实例代码
2019/07/21 Javascript
浅析JavaScript 函数防抖和节流
2020/07/13 Javascript
Vue scoped及deep使用方法解析
2020/08/01 Javascript
python基于Tkinter库实现简单文本编辑器实例
2015/05/05 Python
Python itertools模块详解
2015/05/09 Python
Python模拟百度登录实例详解
2016/01/20 Python
python使用zip将list转为json的方法
2018/12/31 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
ALEX AND ANI:手镯,项链,耳环和更多
2017/04/20 全球购物
美国著名的品牌折扣店:Burlington
2017/06/08 全球购物
viagogo波兰票务平台:演唱会、体育比赛、戏剧门票
2018/04/23 全球购物
煤矿安全生产责任书
2014/04/15 职场文书
五年级下册复习计划
2015/01/19 职场文书
幼儿园教师师德表现自我评价
2015/03/05 职场文书
个人收入证明格式
2015/06/24 职场文书
初中英语教学反思范文
2016/02/15 职场文书