vue页面刷新

# vue 刷新当前页面的方式

# 1. 使用 location api

window.location.href 或者 window.location.replace()

window.location.reload()

会出现空白，体验不是很好

# 2. 先进入一个空路由，然后返回

reflashPage(){
    let NewPage = '_empty' + '?time=' + new Date().getTime()/500;
    this.$router.push(NewPage);
    this.$router.go(-1);
}

1
2
3
4
5

刷新后点浏览器的前进按钮会出现空白页

# 3. 使用 provide / inject

简单的来说就是在父组件中通过 provide 来提供变量，然后在子组件中通过 inject 来注入变量。

app.vue

<template>
  <div id="app">
    <router-view v-if="isRouterAlive"></router-view>
  </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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

需要跳转的页面：前面会有这个 inject

export default {
    inject:['reload'],
    data () {
        return {
        ...
        }
    },

1
2
3
4
5
6
7

后面想刷新当前页面的地方这样写： this.reload();

Vue 是双向数据绑定的，操作数据实时变化，大多情况不需要刷新页面。
之前在做表单清空时用到了页面刷新，表单的数据比较多逐个清空比较麻烦。
最近做页面拖拽排版效果，使用了 jq 的插件操作 dom 没有同时操作数据，导致数据和 dom 不一致，后来选择用刷新页面来做到统一。

更新时间: 3/22/2021, 4:43:19 PM

← vue指令 vue混入→