vue相同的路由之间如何跳转，只是url参数不一样？

Question

假设 页面 /detail/1 上面有一个列表，上面有一个列表，分别需要跳转到 /detail/2, /detail/3 这种相同的页面，只是参数不同，需要跟进id调用接口刷新页面，请问该如何跳转，最好 url 地址也跟着改变

Answer 1

相信你在问这个问题的时候已经预先知晓 vue-router 动态路由 这个功能了。

const routes = [
  // 动态字段以冒号开始
  { path: '/detail/:id', name:'detailPage', component: detailPage },
]

只是不知道如何携带 params 参数跳转。因为大部分时候我们都是使用 path 去跳转的，而不是 name。

那么现在会有两种方式可以选择：

1. 直接拼接在你的 path 后方： this.$router.push('/detail/' + data.detail_id})
2. 使用 name 跳转：this.$router.push({ name: 'detailPage', params: { id: data.detail_id }}

在页面中获取 ID

// vue2
export default() {
  computed: {
    detailId() {
      return this.$route.params.id
    }
  }
}

#导航到不同的位置 - 编程式导航 | Vue Router

---

接口何时触发请求？

这得看你的 router-view 部分是如何设计的，如果是按照 fullPath 设置的，那么可以在组件的生命周期内 created/mounted 来触发接口请求。
如果没有显式声明或者使用 name 来设置的，那么需要你监听 computed 中 detailId 的改变来触发接口调用。

Answer 2

你正常写vue-router跳转的代码就行了,

文档有一个和你几乎一模一样的示例:
https://router.vuejs.org/zh/guide/advanced/navigation-guards#...

你在beforeRouteUpdate里发起请求数据,对详情相关的变量进行更新就好了

<script>
export default {
  beforeRouteEnter(to, from) {
    // 在渲染该组件的对应路由被验证前调用
    // 不能获取组件实例 `this` ！
    // 因为当守卫执行时，组件实例还没被创建！
  },
  beforeRouteUpdate(to, from) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
    // 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
  },
  beforeRouteLeave(to, from) {
    // 在导航离开渲染该组件的对应路由时调用
    // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
  },
}
</script>