Vue2.x选中消息时更新路由参数且不重载组件的实现方法问询

你遇到的同路由跳转触发组件重载、重复请求数据的问题，可以通过以下两种方案解决： #

方案1：使用beforeRouteUpdate导航守卫（官方推荐） #

Vue Router默认会复用同一路由对应的组件，不会重复销毁重建，仅会触发beforeRouteUpdate导航守卫。你只需要拆分逻辑，将不需要重复执行的消息列表请求放在created中执行，路由参数变化时仅更新选中状态即可：

props: {
  messageId: {
    type: String,
    required: false,
    default: null
  }
},
data () {
  return {
    allMessages: [],
    selectedMessage: null
  }
},
async created () {
  // 仅组件首次创建时加载消息列表，后续路由参数更新不会重复执行
  this.allMessages = await messageService.loadMessages()
  this.syncSelectedMessage()
},
// 新增同路由参数更新守卫，不会触发组件重载
beforeRouteUpdate (to, from, next) {
  this.messageId = to.params.messageId
  this.syncSelectedMessage()
  next()
},
methods: {
  syncSelectedMessage () {
    this.selectedMessage = this.messageId 
      ? this.allMessages.find(message => message.id == this.messageId)
      : null
  },
  onMessageSelected (selectedMessage) {
    this.selectedMessage = selectedMessage
    // 正常调用路由push即可，不会触发组件重载
    this.$router.push({ 
      name: 'messages', 
      params: { messageId: selectedMessage.id } 
    })
  }
}

该方案完全遵循Vue Router的设计规范，不会影响其他依赖路由的逻辑（比如埋点、权限校验等），是优先推荐的实现方式。 #

方案2：直接操作浏览器History API（轻量实现） #

如果你不需要触发任何路由相关的钩子，仅需要同步URL地址方便用户复制，可以直接调用原生History API修改地址，完全不会触发Vue Router的跳转逻辑，自然也不会重载组件：

methods: {
  onMessageSelected (selectedMessage) {
    this.selectedMessage = selectedMessage
    // 直接修改URL，不触发任何路由相关逻辑
    const newPath = `/messages/${selectedMessage.id}`
    window.history.replaceState({ path: newPath }, '', newPath)
  }
}

注意：该方案不会触发Vue Router的导航事件，如果你有依赖路由变化的全局逻辑，不建议使用该方案。

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