vue用provide和inject刷新页面

最近在写项目的时候需要刷新页面,用window.reload()和this.$router.go(0)发现虽然可以刷新页面但是在刷新的时候会出现短暂的空白,这样用户体验就会特别的不好,然后发现了这个方法,说是在刷新页面的时候不会出现短暂的空白

首先在APP.vue里面声明这个方法

<template>

  <div id="app">

    <router-view v-if="isRouterAlive"/>   //让其显示隐藏

  </div>

</template>

<script>

export default {

  name: 'App',

provide(){

return{

reload:this.reload   //暴露这个方法

}

},

data(){

return{

style:'',

isRouterAlive:true

}

},

methods:{

reload(){         //重加载方法

this.isRouterAlive=false

this.$nextTick(function(){

this.isRouterAlive=true

})

}

}

}

</script>

然后在需要调用这个方法的组件里面在export default的name下面添加inject:['reload']也就是获取APP.vue里面的重加载方法,最后直接调用即可

*:ஐ٩(๑´ᵕ`)۶ஐ:* 学习使我进步emmmm又是需要努力的一天

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • vue-cli搭建项目 确保安装了node与npm 再目标文件夹下打开终端 执行cnpm i vue-cli -g...
    Akiko_秋子阅读 3,305评论 1 22
  • 本文转载于前端工匠。如有侵权联系本人立刻删除 一、首先带着问题 要学习vue-ro...
    qiaoguoxing阅读 487评论 0 1
  • 准备工作 一、安装脚手架 1、安装vue脚手架,这是构建vue项目的工具-g为全局安装​ npm insta...
    不困于情阅读 2,315评论 0 3
  • 路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about...
    六月太阳花阅读 642评论 0 3
  • core package 概要:Core是所有其他包的基础包.它提供了大部分功能包括metadata,templa...
    LOVE小狼阅读 2,716评论 0 3