vue页面刷新

vue刷新当前页面有挺多种方法，比如

window.location.reload()

或者

this.$router.go(0)

但是这两种方法是会出现一瞬间的白屏，体验不好，所以这里给大家推荐第三种比较好用的刷新页面的方法

//全局配置刷新功能

在app.vue的<router-view></router-view>加上v-if属性

<router-view v-if="isRouterAlive"></router-view> 

在data里面加上isRouterAlive,当然这个属性名可以自己定义，默认值为true

  data () { return { isRouterAlive: true } } 

methods里面加入一个刷新的方法

methods: {
    reload () {
      this.isRouterAlive = false this.$nextTick(function() { this.isRouterAlive = true }) } } 

最后，需要把这个函数 provide 出去

provide () {
    return { reload: this.reload } } 

这样，app.vue上就设置完了

那么当我们需要刷新的时候，在需要的页面上加上这个函数就可以了

首先注入这个函数

inject: ['reload'] 

然后在需要用到这个函数的地方去引用就行了

refresh () {
  this.reload() } 

这样子就可以刷新页面了，而且不会出现白屏的情况，比前面两种方法好用，推荐大家使用。

附带上完整代码

<template> <div id="app"> <div class="wrap"> <router-view v-if="isRouterAlive"></router-view> </div> </div> </template> <script> export default { name: 'App', provide () { return { reload: this.reload } }, data () { return { isRouterAlive: true } }, methods: { reload () { this.isRouterAlive = false this.$nextTick(function() { this.isRouterAlive = true }) } } } </script> <style> #app{ position: relative; } @media only screen and (min-width: 1200px) { .wrap{ width: 65%; margin: 0 auto; } } </style> //以上是在全局配置刷新页面

<template> <button @click="refresh"></button> </template> <script> export default{ name: 'refresh', inject: ['reload'], //注入函数 methods: { refresh () { this.reload() } } } </script>