如何避免Vue Router带参数页面刷新或回退时参数消失的问题？

本文共计1456个文字，预计阅读时间需要6分钟。

在Vue Router中，传参是前端经常需要用到的操作。很多场景下，都需要将一些参数传递到另一个页面。下面将详细介绍Vue Router如何进行传参，以及一些相关的小问题。

Vue Router传参

Vue Router支持两种主要的传参方式：query和params。

1. Query传参

使用`?`符号后跟参数名和值，参数之间用`&`连接。

javascript this.$router.push({ path: '/user', query: { userId: 123 } });

在组件中，可以使用`this.$route.query`获取到传递的参数。

2. Params传参

使用动态路由进行传参。

javascript // 路由配置 const router=new VueRouter({ routes: [ { path: '/user/:userId', component: User } ] });

// 跳转 this.$router.push({ name: 'User', params: { userId: 123 } });

在组件中，可以使用`this.$route.params`获取到传递的参数。

小问题

1. Query和Params的区别

- Query传递的参数会出现在URL中，适合不需要保持状态的情况。 - Params传递的参数不会出现在URL中，适合需要保持状态的情况。