vue刷新当前页面的几种方法你知道几种？

简介：js刷新当前页面，vue通过路由刷新当前

之前我写了一篇【js监听网络状态实现断网重连后自动刷新页面】的文章，里面使用【location.reload()】的方式刷新页面。但是今天在网上看到几种不同的刷新方式，大家看看你们知道哪几种？

1. location.reload() 和$router.go(0)

这两种方式都是利用浏览器刷新功能，相当于按了【f5】刷新页面。这种方式最大的优点就是简单，缺点也很明显，刷新会出现页面空白，用户体验不好。

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    online(e) {
      //网络连接时使用location.reload刷新页面
      location.reload()
      //或者$router.go(0)的方式
      // this.$router.go(0)
    }
  },
  created() {
    //在全局监听网络连接，这个监听建议大家封装到vuex中，进行全局管理
    window.addEventListener('online', this.online.bind());
  }
}
</script>

2. 先跳转一个空白页面或者加载提示页面再跳转回原页面

这种方式有点麻烦，需要先跳转一个自定义的空白页面，再跳转回来。而且空白页面对用户体验不好。具体实现步骤如下：

2.1 新建一个空白或者加载提示页面

<template>
    <div></div>
</template>
<script>
export default {
    name: 'onLoading',
    created() {
        console.log('空白页加载')
        //重新跳回之前的页面
        this.$router.replace(this.$route.query.redirect)
    }
}
</script>

2.2 监听函数中跳转空白页面，代码如下

window.addEventListener('online',function(e){
    //使用replace跳转后不会留下 history 记录,并通过redirect传递当前页面的路径
    this.$router.replace(`/blank?redirect=${this.$route.fullPath}`);
})

3. 通过 router-view 绑定 key 属性刷新当前页面

在app的入口页面的<router-view/>上面绑定key属性，通过销毁和重新创建页面的方式刷新页面，具体的方式是指定key的值为 $route.fullPath ,再通过$router.push()改变$route.fullPath的值，从而刷新页面

3.1 APP入口页面的router-view绑定key属性

<template>
  <div id="app">
    <router-view :key="$route.fullPath"/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

3.2 在监听函数中改变$router.fullPath

window.addEventListener('online',function(e){
    this.$router.push(`${this.$route.path}?t=${Date.now()}`)
})

 

有什么不对的可以在我的公众号留言哦