文中涉及问题可能比较基础，大佬请绕路。
如若文章中有错处，欢迎纠正指出！
- 页面间传参问题
页面间传参问题
页面 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 参数。
