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