vue重新刷新当前路由(非浏览器强刷,不会出现闪屏)

120 阅读1分钟
  1. 一般刷新:window.location.reload()window.location.href等是强刷,刷新时页面会出现短暂白屏,前端状态(如 Vuex、组件状态)会全部重置,虽然可以触发生命周期方法,但无法精准控制刷新仅限于某个组件

  2. 无感刷新

    核心思路:Vue 的 <router-view> 支持通过 key 属性强制重新渲染组件。结合动态的 query 参数,可以实现:

    1. 局部刷新: 只刷新某个组件而非整个页面。
    2. 保留前端状态: 避免 Vuex 等全局状态被重置。
    3. 精准控制: 触发的仅是目标组件的生命周期。
  3. 具体实现:

        // 路由出口处添加key:
        <router-view :key="$route.query.refreshFlag"></router-view>
    
        // 需要刷新时调用:
        this.$router.replace({ query: { refeshFlag: new Date().getTime() }})