Vue无感刷新当前页面

使用 Vue 选项/组合 Api provide / inject Api 地址，此方法可以实现无感刷新并且不会出现闪烁的空白。

1. 首先在根组件 App.vue 定义这个方法

html

复制代码

<template>
    <div id="app">  <router-view v-if="routerAlive">router-view>  div> template> 

javascript

复制代码

export default {
    //暴露 reload 这个方法，方便组件调用  provide() {  return {  reload: this.reload,  }  },   data() {  return { routerAlive: true }  },   methods: {  //重新加载的方法  reload() {  this.routerAlive = false  this.$nextTick(function () {  this.routerAlive = true  })  },  }, } 

2. 这样就可以在你要刷新的页面组件调用这个方法

javascript

复制代码

export default {
    inject: ["reload"],  ......   methods:{  handleReload(){  //在你要用到的地方调用这个重新刷新的方法  this.reload()  }  } } 

3. 最后如果不考虑用户体验的话，也可以用下面的方法：

javascript

复制代码

// 1.window.location.reload()应该是刷新.相当于 按页面刷新按钮
window.location.reload()