Vue2中beforeRouteEnter修改的数据未在头部组件更新如何解决

你遇到的问题通常由以下两种原因导致：

• beforeRouteEnter 路由守卫仅对路由配置中component/components字段绑定的路由页面组件生效，如果你的Header是全局挂载在App.vue的公共头部，不属于当前路由匹配的组件，这个守卫根本不会触发，自然不会修改name的值。
• 若Header确实是路由匹配的组件，多为组件缓存、或响应式更新未触发导致的修改不生效。

场景1：Header为全局公共头部 #

不要用组件内的beforeRouteEnter守卫，换以下方案实现：

• 方案1：在Header内监听全局路由变化

export default {
  data() {
    return { name: 'test' }
  },
  created() {
    this.$router.beforeEach((to, from, next) => {
      // 可根据to的路由信息自定义name的取值
      this.name = 'done'
      next()
    })
  }
}

• 方案2：使用Vuex/事件总线做全局状态管理，将修改逻辑放在全局路由守卫中更新状态，Header组件直接绑定对应状态值即可自动更新。

场景2：Header为当前路由匹配的页面组件 #

• 先在next回调中添加日志确认守卫正常触发，如果未触发请检查路由配置是否正确绑定了Header组件。
• 若回调正常执行但视图未更新，可通过强制响应式更新解决：

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 强制走响应式赋值逻辑
    vm.$set(vm, 'name', 'done')
    // 必要时可加强制渲染
    // vm.$forceUpdate()
  });
}

• 如果组件开启了keep-alive缓存，可将更新逻辑移到beforeRouteUpdate或activated生命周期中：

// 路由参数变化时触发
beforeRouteUpdate(to, from, next) {
  this.name = 'done'
  next()
},
// 缓存组件激活时触发
activated() {
  this.name = 'done'
}

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