-
一般刷新:
window.location.reload()window.location.href等是强刷,刷新时页面会出现短暂白屏,前端状态(如 Vuex、组件状态)会全部重置,虽然可以触发生命周期方法,但无法精准控制刷新仅限于某个组件 -
无感刷新
核心思路:Vue 的
<router-view>支持通过key属性强制重新渲染组件。结合动态的query参数,可以实现:- 局部刷新: 只刷新某个组件而非整个页面。
- 保留前端状态: 避免 Vuex 等全局状态被重置。
- 精准控制: 触发的仅是目标组件的生命周期。
-
具体实现:
// 路由出口处添加key: <router-view :key="$route.query.refreshFlag"></router-view>// 需要刷新时调用: this.$router.replace({ query: { refeshFlag: new Date().getTime() }})