刷新当前页面的几种方式以及简单的介绍一下provider/inject

落花浮王杯 提交于 2019-12-04 08:44:18

比较常用的三种方法:传统式刷新,伪造式刷新,无痕刷新

1、传统式刷新

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

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

但是这两种方法的用户体验并不是很好,会有短暂的白屏出现

2、伪造式刷新

主要是通过路由的方式实现跳转。点击某一个按钮跳转到某一个空白页,然后再立马跳回来。

// index.vue 首页  要刷新的那个页面
this.$router.replace('/blank')

// blank.vue 空白页
created() {
    this.$router.replace('/')
}

但是这种方法在刷新的时地址栏会有快速的地址切换过程

3、vue的无痕刷新

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

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

provide:全局注册方法;

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

App.vue         

 

 

 

需要进行刷新的页面 

 

 

在这里简单的说一下provider和inject

简单来说,就是父组件通过provider提供变量,子组件通过inject注入变量,(这种方式可以实现父子组件传值),

provider和inject需要一起使用,这样可以实现一个祖先组件可以向其所有的子孙组件注入变量,不论组件层次有多深,只要保持上下游关系成立的

时间里都会生效,并且并不局限于当前的父组件

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

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

     

          

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!