你在问这个问题的时候,应该已经预先知晓 `vue-router` [动态路由](https://link.segmentfault.com/?enc=dygq0U%2Fj%2BvYBi0hSoBxZgQ%3D%3D.IRMZzWWeHjzfzH0vFhEgX7z434kXOyghhdCo88CY3nfVxG7xzGnvZ29ImFYQkc502jKPulXr723yUhjuUw0JnRuxNGaiBpL5BL8rJ3KIlms%3D) 这个功能了。 ``` 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](https://link.segmentfault.com/?enc=FrW%2FmonwImahY1Tvf6O5Ww%3D%3D.vSgWkyzQIOsFBEovlc3NpSZeC%2BAH9I6rCqnOW%2B7UmhxKEabcZBbtq%2FVFnCGcQhtuxSyRWg9rNDSUvl6cdiNyr8fDNu8gEeVNG%2FSnP6OvjcAYBS0fFWz0yCmkyh3zHusXhJ7%2Bu2vvCbSxZzdcDbP2jB7n%2B3CZmfmihczwTgmEZanZPBRT9jjVL1NLNqOqgaNz) --- ### **接口何时触发请求?** 这得看你的 `router-view` 部分是如何设计的,如果是按照 `fullPath` 设置的,那么可以在组件的生命周期内 `created/mounted` 来触发接口请求。 如果没有显式声明或者使用 `name` 来设置的,那么需要你监听 `computed` 中 `detailId` 的改变来触发接口调用。