一、什么是无痕刷新

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

传统的刷新页面方式

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. 《单词的减法》state1~state17(第三遍学习记录)

    2016.05.24 state 8 curse/curve dedication 多用于奉献和献身 disastrous disruptive distract state 9 domestic/d ...

  2. svn设置文件提交过滤、svn设置classes文件提交

    在svn提交文件的时候为了避免一些不必要的文件也提交到资源库 像编译后的.class文件 第一步:在文件中右击打开设置, 第二步:找到全局忽略样式 第三步:修改要过滤的文件 设置过滤通配符 *clas ...

  3. Font and PDF

    1. 独立存在的Font文件 有三类: Type 1 Font TrueType Font OpenType Font Type 1 是由Adobe开发的,它是基于PostScript的Font,它通 ...

  4. leetcode.双指针.680验证回文字符串-Java

    1. 具体题目 给定一个非空字符串 s,最多删除一个字符.判断是否能成为回文字符串. 示例 1: 输入: "aba" 输出: True 示例 2: 输入: "abca&q ...

  5. JS高级程序随笔二

    var person1={ toLoginString:function(){ return "lili"; }, toString2:function(){ return &qu ...

  6. canvas 踩坑记录

    一.绘制一个带有多张图片和文字的canvas.要求将一张矩形的图片,放置进去显示为圆角矩形的图片 解决方案,先把图片处理成圆角矩形的样子,再放进去就可以了 绘制圆角矩形图片的解决方案 效果如下图 &l ...

  7. XX-net 3.11.9 登陆Google等出现没有开启cookie的问题

    糟糕!您的浏览器似乎禁用了 Cookie.请务必启用 Cookie 或尝试打开一个新的浏览器窗口. 出现这个问题解决方法: 1.配置好X-tunnel,即登录账号2.打开谷歌浏览器或者你用的浏览器,设 ...

  8. VINS 检测回环辅助激光建图

    最近接到一个任务,在激光检测回环失败时,比如黑色物体多,场景大等,可否利用视觉进行回环检测.如果只是检测回环,现有的许多框架都可以使用.ORB-SLAM本身就有单目模式,且效果不错.但是发现ORB在检 ...

  9. .net Core AJAX使用Header传递参数,以JsonResult返回信息

    function postHeader() { $.ajax({ url : "/myTest/PostHeader?time="+ (new date()).getTime(), ...

  10. shell函数的定义和调用