Vue调用$router.push后如何无需页面刷新更新根组件状态

你可以不用页面重载直接更新根组件状态，以下是两种最常用的落地方式：

方案1：全局状态管理（最推荐） #

把登录状态存在全局可访问的响应式存储中，根组件直接绑定该状态自动更新，完全不需要修改目标页面代码，也不会丢失路由params参数：

1. Vue2项目可使用Vuex，Vue3项目可使用Pinia存储登录状态，示例逻辑如下：

// 登录接口请求成功后先更新全局状态
this.$store.commit('updateLoginStatus', true)
// 再正常执行路由跳转即可
this.$router.push({
   name: "foo",
   params: {
      title: "Hello",
      message: "World!"
   }
})

2. App.vue中直接绑定全局状态控制登出按钮显示：

<template>
  <button v-if="$store.state.isLogin">Logout</button>
</template>

方案2：根组件监听路由变化 #

如果不想引入全局状态管理工具，可以直接在App.vue中监听路由变化，每次路由切换时自动读取当前登录状态更新视图：

// App.vue 中添加监听逻辑
export default {
  data() {
    return {
      isLogin: false
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler() {
        // 从localStorage/会话存储中读取当前登录状态
        this.isLogin = !!localStorage.getItem('user_login_token')
      }
    }
  }
}

可选：强制重载路由（非整页刷新） #

如果确实需要触发路由对应组件重新渲染，可以给App.vue的router-view绑定响应式key，登录后修改key值即可触发重新渲染，不会丢失params参数：

<!-- App.vue 模板 -->
<router-view :key="routerKey" />

// 登录成功后修改key值
this.$root.routerKey = Date.now()
// 再执行正常跳转即可

不推荐使用this.$router.go()或location.reload()，前者容易触发循环刷新，后者会丢失内存中的路由params参数，还会导致整页闪屏降低体验。

内容的提问来源于stack exchange，提问作者reans