vue刷新当前页面的三种方法

1.第一种:推荐
这种方法会在浏览器地址栏中多添加#reloaded

  mounted() {
    if (location.href.indexOf("#reloaded") == -1) {
      location.href = location.href + "#reloaded";
      location.reload();
    }
  },

2.下面两种方法都可以刷新当前页面的,缺点就是相当于按ctrl+F5 强制刷新那种,整个页面重新加载,会出现一个瞬间的空白页面,体验不好

this.$router.go(0)
location.reload()

3.新建一个空白页面,点击确定的时候先跳转到这个空白页,然后再立马跳转回来,这个方法适用于dialog关闭时刷新页面数据

//监听dialog的关闭事件或者确定按钮的点击事件,当事件触发时执行下面代码

this.$router.replace({
  path: '/path1', //空白页的路由地址
  name: 'name1'
})

在空白页面执行下面的代码:

data(){
this.$router.replace({
  path: '/path2', //让路由跳转回当前页面
  name: 'name2'
})
return {}
}

这个方式,相比第二种和第三种种不会出现一瞬间的空白页,只是地址栏有个快速的切换的过程,可采用
4.第五种方法:provide / inject 组合
这个方法需要修改App.vue组件,修改后的代码如下所示:





通过声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载,这里定义了isRouterAlive //true or false 来控制
然后在需要刷新的页面中注入App.vue组件提供 reload 依赖,然后直接用this.reload来调用就行,如下所示:


4.第六种方法:利用vue的内置组件keep-alive巧妙实现进入页面的时候重新获取想要的数据
代码:




你可能感兴趣的:(vue刷新当前页面的三种方法)