Vue 项目中页面间传参问题

Question

页面 A 跳转到页面 B 需要传参，我一般采用的是编程式导航 router.push( )，而不是声明式导航 <router-link :to=" ">，二者效果作用都一样。以下为路由设置：

// 部分不关键的代码省略
// ...
const routes = [
  {
    path: '/trip/history',
    name: 'HistoryTrip',
    component: HistoryTrip,
  },
  {
    path: '/trip/history/detail',
    name: 'TripDetail',
    component: TripDetail,
  },
]

const router = new VueRouter({
  routes,
  // 使用 HTML5 history 模式
  mode: 'history',
})

export default router

编程式传参有两种方式：

方式一：router.push({ name: 'TripDetail', params: { TripOrderId: 123 }})

// A 页面，此时 URL 为：http://localhost:8080/trip/history
this.$router.push({ name: 'TripDetail', params: { TripOrderId: 123 }})
// B 页面获取参数的方法，此时的 URL 为：http://localhost:8080/trip/history/detail
console.log(this.$route.params.TripOrderId)

大家注意一下 B 页面的 URL，上面并没有 TripOrderId 这个参数。采用这种方法进行传参有两个缺点，这就是其中一个。另一个就是：跳转到页面 B 之后，如果对页面进行刷新，这个 params 参数是会丢失的。打印一下就知道，打印结果应该是 undefined。

方式二（推荐）：router.push({ path: '/trip/history/detail', query: { TripOrderId: 123 }})

// A 页面，此时URL为：http://localhost:8080/trip/history
this.$router.push({ path: '/trip/history/detail', query: { TripOrderId: 123 }})
// B 页面获取参数的方法，此时的URL为：http://localhost:8080/trip/history/detail?TripOrderId=123
console.log(this.$route.query.TripOrderId)

方法二中，最明显的就是 URL 中可以看出参数是什么，这种方法更为直观。最重要的是对页面进行刷新，query 参数并不会丢失，依然可以在地址栏看到 TripOrderId 参数。