Vue项目中常见问题的解决办法（不定期更新）

文中涉及问题可能比较基础，大佬请绕路。
如若文章中有错处，欢迎纠正指出！

• 页面间传参问题

页面 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 参数。