vue 实现当前页F11全屏和F5刷新（“provide / inject”）的功能

provide/inject介绍

provide / inject：这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
provide ：选项应该是：一个对象或返回一个对象的函数
inject：选项应该是：一个字符串数组，或 一个对象，对象的 key 是本地的绑定名

vue官网对provide-inject介绍：https://cn.vuejs.org/v2/api/#provide-inject

示例

1. 在父组件中注册， 通过使用指令“v-if”对页面进行从新渲染和注销，这体现了指令 v-if 性能。接下来路由初始化状态

代码如下：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view v-if="newReload"></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  provide (){
     return {
       reloadF5:this.reloadF5
     }
  },
  data(){
    return {
      newReload:true
    }
  },
 methods:{
    reloadF5 (){
       this.newReload = false
       this.$nextTick(function(){
          this.newReload = true
       })
    }
  }
}
</script>

2.子组件的使用同时实现F11全屏和F5刷新功能
在你使用的地方调用F5当前页面刷新的方法------->如图所示：

从上面这个例子可以看出，只要在父组件中调用了，那么在这个父组件生效的生命周期内，所有的子组件都可以调用inject来注入父组件中的值。