一、什么是无痕刷新

在不刷新浏览器的情况下,实现页面的刷新。

传统的刷新页面方式

window.location.reload()原生 js 提供的方法

this.$router.go(0)vue 路由里面的一种方法

这两种方法都可以达到页面刷新的目的,简单粗暴,但是用户体验不好,相当于按 F5 刷新页面,页面的重新载入,会有短暂的白屏

二、实现无痕刷新

先在全局组件注册一个方法,用该方法控制 router-view 的显示与否,然后在子组件调用;

v-if 控制 <router-view></router-view> 的显示;

provide:全局注册方法;

inject:子组件引用 provide 注册的方法

APP.vue

需要进行无痕刷新的页面

三、provide/inject的使用

简单的来说就是在父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量(这种方式也可以实现组件传值,父传子),provide / inject这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。这个东西很类似于React中的context,实现跨组件传值

  • provide 选项应该是:一个对象或返回一个对象的函数

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

provide

inject

Vue实现无痕刷新的更多相关文章

  1. Vue 实现前进刷新,后退不刷新的效果 玩转vue-router里的meta

    Vue 实现前进刷新,后退不刷新的效果 玩转vue-router里的meta. 需求一: 在一个列表页中,第一次进入的时候,请求获取数据. 点击某个列表项,跳到详情页,再从详情页后退回到列表页时,不刷 ...

  2. vue中前进刷新、后退缓存用户浏览数据和浏览位置的实践

    vue中前进刷新.后退缓存用户浏览数据和浏览位置的实践 2018年07月07日 11:58:40 大灰狼的小绵羊哥哥 阅读数:4492   vue中,我们所要实现的一个场景就是: 1.搜索页面==&g ...

  3. Vue 实现手动刷新组件

    Vue 实现手动刷新组件:https://www.jianshu.com/p/742142dc95f3

  4. vue项目如何刷新当前页面

    1.场景 在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求. 2.遇到的问题 1. 用vue-router重新路由到当前页面,页面是不进行刷新的 2.采用window.rel ...

  5. vue每次修改刷新当前子组件

    刚入门vue,发现很多坑,对很多框架兼容性不太友好,比如layui等 每次删除相关信息,更新相关信息,不会主动刷新当前页面内容,只能手动刷新 第一步,我们在跟组件理由设置一个参数,用来判断是否需要刷新 ...

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

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

  7. nignx部署Vue单页面刷新路由404问题解决

    官网说明: https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E8%AD%A6%E5%91%8A 在linux下搭建ngi ...

  8. vue 后退不刷新页面

    使用 this.$router.push({path: '/aichat'})路由跳转方式跳转页面 要实现 home => chat  chat页面刷新: chat => report, ...

  9. vue中强制刷新的bug处理

    vue是单页面应用,跳转路由也是局部刷新,这里就拿后台管理系统而言,如果你的后台管理系统是左右布局,你不会遇到这样的问题,但是如果你的后台管理系统是上左右布局,你就会遇到这个问题,一级菜单在最上面,二 ...

随机推荐

  1. datastudion 资源导入python包,编写模块

    学习文档,不懂再问. https://help.aliyun.com/document_detail/74423.html?spm=a2c4g.11186623.6.688.72635debHqgkV ...

  2. Bootstrap 学习笔记2 栅格系统 辅助类下拉框

    辅助类和响应式工具: 颜色和字体相同 响应式工具: 图标菜单按钮组件: btn-group 按钮式下拉菜单

  3. CF560补题

    D题:用来对比的vector<long long> b不能被初始化大小成n,因为a里面有n个因子,但是这是可能存在遗漏情况的.如果刚好是遇到实际因子远多于n,那么就会在运行过程中出错. 还 ...

  4. 科普:std::sort干了什么

    std::sort算是STL中对OIer比较友好的函数了,但你有想过sort是如何保证它的高速且稳定吗? 正文 我们首先来到第一层:sort函数 template<typename _Rando ...

  5. Windows平台下在Emacs中使用plantuml中文乱码问题(已解决)

    Windows平台下在Emacs中使用plantuml中文乱码问题(已解决) */--> code {color: #FF0000} pre.src {background-color: #00 ...

  6. 一文搞懂--Java中重写equals方法为什么要重写hashcode方法?

    Java中重写equals方法为什么要重写hashcode方法? 直接看下面的例子: 首先我们只重写equals()方法 public class Test { public static void ...

  7. IIS Express 不允许的父路径

    IIS Express 启动一个asp的网站,出现一个错误 Active Server Pages 错误 'ASP 0131' 不允许的父路径 对于IIS可以在可视化的IIS Manager中配置: ...

  8. SpringMVC学习(5):数据绑定2 @PathVariable、@CookieValue、@RequestHeader、@ModelAttribute..

    在系列(4)中我们介绍了如何用@RequestParam来绑定数据,下面我们来看一下其它几个数据绑定注解的使用方法. 1.@PathVariable 用来绑定URL模板变量值,这个我们已经在系列(3) ...

  9. db2序列

    CREATE SEQUENCE <sequence-name> AS data-type   默认 As Integer START WITH <numeric-constant&g ...

  10. CSS中表示颜色的4种方法

    #1:直接用颜色名称 #2:十六进制数 #3:RGB整数设置颜色 0-255 #4:RGB百分数设置颜色0%-100%