Vue Router跳转同路由未触发beforeEnter预加载器 如何用store数据重载页面

问题原因 #

Vue Router 默认会忽略指向当前相同路由的导航请求，你在saveChanges中跳转的EventManagement就是当前所处路由，且传入的ID参数和当前路由参数一致，因此不会触发任何路由守卫逻辑，beforeEnter里的预加载代码自然不会执行。

解决方案 #

方案1：强制触发路由导航（Vue Router 4+ 适用） #

给$router.push增加force: true配置，强制触发完整导航流程，路由守卫会正常执行：

saveChanges() {
  store.setNewEvent(this.newEvent);
  this.$router
    .push({
      name: RouteNames.EventManagement.name,
      params: {
        ID: this.event.id,
      },
      force: true // 新增强制导航配置
    });
},

方案2：增加动态查询参数（Vue Router 3 适用） #

如果是旧版本Vue Router没有force参数，可以新增一个随机变化的查询参数，让路由判定为新的导航请求：

saveChanges() {
  store.setNewEvent(this.newEvent);
  this.$router
    .push({
      name: RouteNames.EventManagement.name,
      params: {
        ID: this.event.id,
      },
      query: {
        t: Date.now() // 每次请求参数不同，触发导航
      }
    });
},

方案3：直接更新组件数据（更轻量） #

如果不需要走完整预加载逻辑，你可以直接在保存后同步更新当前组件的event属性，不需要做路由跳转：

saveChanges() {
  store.setNewEvent(this.newEvent);
  this.event = this.newEvent // 直接更新当前组件数据触发重渲染
},

额外注意 #

Vue Router 4 不支持在导航时传入未在路由path中定义的参数，你直接修改to.params.event的操作可能会导致参数丢失，建议组件直接从store.state.newEvent读取数据，不要依赖路由参数传递非定义参数。

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