面试题：Vue Router中router.push与router.replace结合动态路由的应用

Question

在一个带有动态路由参数的Vue Router项目里，例如/user/:id，从列表页跳转到具体用户详情页时，分别使用router.push和router.replace，并传递参数，代码应该怎么写？同时，阐述在参数变化时，这两种导航方式对组件生命周期钩子函数的触发有何不同影响？

Answer 1

使用 router.push 传递参数

在列表页跳转到用户详情页时，使用 router.push 可以这样写：

// 假设在列表项的点击事件处理函数中
handleClick(id) {
  this.$router.push({
    name: 'user', // 假设路由配置中有一个名为 'user' 的路由
    params: { id: id }
  });
}

或者使用字符串路径形式：

handleClick(id) {
  this.$router.push(`/user/${id}`);
}

使用 router.replace 传递参数

使用 router.replace 类似，只是方法名不同：

// 假设在列表项的点击事件处理函数中
handleClick(id) {
  this.$router.replace({
    name: 'user',
    params: { id: id }
  });
}

或者字符串路径形式：

handleClick(id) {
  this.$router.replace(`/user/${id}`);
}

两种导航方式对组件生命周期钩子函数触发的不同影响

• router.push：
  • 当使用 router.push 跳转到新的路由，且路由参数发生变化时，组件实例不会被销毁并重新创建，而是复用现有组件实例。此时，组件的 beforeRouteUpdate 生命周期钩子函数会被触发，可以在这个钩子函数中处理参数变化带来的更新逻辑。例如：

export default {
  name: 'UserDetail',
  beforeRouteUpdate(to, from, next) {
    // 在这里根据新的参数更新组件数据
    this.fetchUser(to.params.id);
    next();
  },
  methods: {
    fetchUser(id) {
      // 从 API 获取用户数据的逻辑
    }
  }
}

• created、mounted 等钩子函数不会再次触发，因为组件实例没有被重新创建。
• router.replace：
  • router.replace 和 router.push 类似，在参数变化时，同样不会销毁并重新创建组件实例，而是复用现有组件实例。所以同样会触发 beforeRouteUpdate 钩子函数，created、mounted 等钩子函数也不会再次触发。不同之处在于，router.replace 不会向浏览器历史记录中添加新的记录，而是替换当前的历史记录。这意味着，当用户点击浏览器的后退按钮时，不会回到之前的页面，而是直接回到再之前的页面。