1.场景

在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。

2.遇到的问题

1. 用vue-router重新路由到当前页面,页面是不进行刷新的

2.采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好

3.解决方法

provide / inject 组合

作用:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。

App.vue:

声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载

tableList.vue:

在页面注入App.vue组件提供(provide)的 reload 依赖,在逻辑完成之后(删除或添加...),直接this.reload()调用,即可刷新当前页面。

4.provide / inject 用法

provide:选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。

inject:一个字符串数组,或一个对象,对象的 key 是本地的绑定名

提示:provide 和 inject 绑定并不是可响应的。这是刻意为之的。如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。

vue项目如何刷新当前页面的更多相关文章

  1. 转:vue项目如何刷新当前页面

    想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种: 如果希望点击确定的时候,Dialog 对话框关闭的时候,当前http://loca ...

  2. vue 项目中如何在页面刷新的状态下保留数据

    1.问题:在vue项目中,刷新页面之后,我当前打开的所有菜单,都消失,我如何实现刷新之后页面仍然是刷新之前的状态 效果图: 解决方法: 使用vuex作状态管理: 将vuex里面的数据同步更新到loca ...

  3. 直击--vue项目微信小程序页面跳转web-view不刷新-根源

    背景 最近项目需要适配小程序,项目是使用了vue开发的网站,其中改造方式是,每个页面都使用小程序创建一个页面通过web-view来显示指定页面的. 在没有使用小程序时,路由跳转时,刷新页面等等,这个是 ...

  4. vue项目中返回之前页面数据不刷新的问题

    利用vue做项目的时候会有让用户选择当前页面的某些数据,然后再跳到下一页,而下一页是根据上一页的数据来的,有时候选择了上一页的不同选项,下一页的数据可能还是之前的 这个就属于vue的数据获取问题 解决 ...

  5. vue项目中在同一页面多次引入同一个echarts图表的自适应问题

    在父组件页面引入两次该图表子组件显示的效果: 由于是百分比宽高,所以在窗口发生变化时,需要让图表也跟着自适应,所以才出现了本次讨论的问题啦. 先看下完整的图表子组件代码(在父组件就是直接引入,不需要传 ...

  6. vue项目在APP禁止页面缩放

    veu-cli自动生成的项目中,index.html中meta 标签内容如下,放在手机上浏览 是可以放大缩小的<meta name="viewport" content=&q ...

  7. app嵌套的vue项目更新后,页面没有更新

    记录下解决过程 1.index.html增加下面meta标签 <meta http-equiv="pragram" content="no-cache"& ...

  8. vue项目放在IE上页面空白的问题

    Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码 1.npm install babel-polyfill --save 2.main.js中引入 import 'babel-poly ...

  9. vue项目刷新当前页面

    场景: 有时候我们在vue项目页面做了一些操作,需要刷新一下页面. 解决的办法及遇到的问题: this.$router.go(0).这种方法虽然代码很少,只有一行,但是体验很差.页面会一瞬间的白屏,体 ...

随机推荐

  1. Android ORM 框架之 greenDAO

    前言 我相信,在平时的开发过程中,大家一定会或多或少地接触到 SQLite.然而在使用它时,我们往往需要做许多额外的工作,像编写 SQL 语句与解析查询结果等.所以,适用于 Android 的ORM  ...

  2. 物理引擎中velocity的单位是个什么鬼?

    现在, 你可能对于什么是velocity的单位感到奇怪.他是单位秒中经过点的一个可测量的量(pt/s).如果你想要在iphone横屏从左往右的移动物体,并且你想在1秒内移动1024个点,那么物体的x速 ...

  3. ATPCS

    ATPCS是: Arm Thumb procedure Call Standard的缩写.意思是arm thumb子程序调用规范.      C语言函数与C函数之间进行调用是用同一个C函数调用方式进行 ...

  4. 【LaTeX排版】LaTeX论文排版<二>

    1.目录的生成     直接使用命令\tableofcontents即可.其默认格式如下: 我们会发现,这样的格式不一定是我们所期望的.比如说,我们也希望章标题与页码之间也有点连线,并且也希望将致谢. ...

  5. PS 滤镜算法原理——染色玻璃

    %%%% 完成PS 中的染色玻璃滤镜特效 clc; clear all; close all; Image=imread('4.jpg'); Image=double(Image); Gray_Ima ...

  6. 做自己的软件的Gallery(一)

    先上效果图: 如图,android默认也有Gallery,很多软件在调用时,都是使用自己的Gallery,一方面好维护,另外一方面可以做优化.要做成以上样式,图片加载类起至关重要,一不小心,就好OOM ...

  7. C语言算法--统计字符串中单词的个数

    #include <stdio.h> #include <string.h> #include <stdlib.h> int main(void) { int le ...

  8. CRF资料

    与最大熵模型相似,条件随机场(Conditional random fields,CRFs)是一种机器学习模型,在自然语言处理的许多领域(如词性标注.中文分词.命名实体识别等)都有比较好的应用效果.条 ...

  9. obj-c编程10:Foundation库中类的使用(4)[文件管理,查询当前进程信息]

    接上一篇文件管理博文.我们可以用NSPathUtilities.h中包含的NSString函数和分类扩展来以兼容的方式处理路径.下面凡是有系统编程经验的童鞋都知道是啥意思了: #import < ...

  10. 图片验证码demo示例

    1.首先我们需要一个生成图片验证码图片的一个工具类(下方会有代码示例) 代码如下: package com.util; import java.awt.BasicStroke; import java ...