一、什么是无痕刷新

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

传统的刷新页面方式

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. Java + selenium window（）接口方法介绍

    在浏览器启动的代码中,有一段关于window接口的调用,这篇文章就是来解释介绍这个接口的.代码如下 driver.manage().window().maxmize(); window接口主要是用来控 ...

  2. Percona XtraDB Cluster集群5.7 开启SSL认证

    mysqldump -uroot -p --ssl-cert=/data/mysql/client-cert.pem --ssl-key=/data/mysql/client-key.pem -h 1 ...

  3. Java导入

    导入(import)声明用于将任何类型导入编译单元.导入(import)声明出现在包声明之后,第一个类型声明之前. 有两种类型的导入声明: 单类型导入声明 按需导入声明 单类型导入声明 单类型导入声明 ...

  4. Yii 1.1 cookie删不掉

    我的cookie是这样设置的: $cookie = new CHttpCookie('username','Jack'); $cookie->expire = time()+60*60*24*3 ...

  5. 模拟javaWeb责任链的设计

    这篇文章介绍了责任链模式的应用:本文介绍如果自己实现一个责任链 定义请求和响应信息 简单定义请求类Request(封装一个字符串) public class Request { String requ ...

  6. 第四节 RabbitMQ在C#端的应用-客户端连接

    原文:第四节 RabbitMQ在C#端的应用-客户端连接 版权声明:未经本人同意,不得转载该文章,谢谢 https://blog.csdn.net/phocus1/article/details/87 ...

  7. 数据库设计-Mysql数据库表设计的过程中几个关键点

    一.表设计过程中应该注意的数据类型 1)更小的通常更好 控制字节长度 2)使用合适的数据类型: 如tinyint只占8个位,char(1024)与varchar(1024)的对比,char用于类似定长 ...

  8. Ansible--04 ansible 流程控制

    ansible 流程控制 playbook 条件语句 不管是 shell 还是各大编程预言中,流程控制,条件判断都是必不可少的,在我们使用 Ansible的过程中,条件判断的使用频率都非常高. 例如: ...

  9. go语言从例子开始之Example21.协程

    Go 协程 在执行上来说是轻量级的线程. golang使用协程用go关键字.后边正常调用函数. Example: package main import "fmt" func ak ...

  10. Java网络编程:什么是Socket编程?

    所谓socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄.应用程序通常通过"套接字"向网络发出请求或者应答网络请求. 我们开发的网络应用 ...