无痕刷新

这里主要记录三种方法，分别是：强制刷新、伪造刷新、无痕刷新。

强刷新:

//原生 js 提供的方法
window.location.reload()

//vue 路由里面的一种方法
this.$router.go(0)

this.$router.go(val) => 在history记录中前进或者后退val步，当val为0时刷新当前页面。

这两种方法都可以达到页面刷新的目的，简单粗暴，但是用户体验不好，相当于按 F5 刷新页面，页面的重新载入，会有短暂的白屏。

无痕刷新

Vue无痕刷新

先在全局组件注册一个方法，用该方法控制 router-view 的显示与否，然后在子组件调用；

用 v-if 控制 的显示。

provide：全局注册方法；

inject：子组件引用 provide 注册的方法；

App.vue：

当前组件：

当点击按钮时所有页面重新渲染，不会有短暂空白，每个组件的生命周期会载执行一遍。

js 无痕刷新

去掉路径上的参数，pushState添加一个历史记录，可以回退到之前的有参数的地址。使用replaceState则没有保存之前的记录。此时页面的组件的生命周期不会重新调用。

export const removeUrlParam = () => {
  var url = window.location.href
  var valiable = url.split('?')[0]
  //0表示还是使用之前的title
  window.history.pushState({}, 0, valiable)
}