Vue query路由传参跳转页面,跳转后刷新页面导致参数消失处理
时间: 2024-03-06 09:48:13 浏览: 212
vue路由传参页面刷新参数丢失问题解决方案
Vue Router提供两种方式进行路由传参,一种是使用params,另一种是使用query。
使用params传参时,参数会被编码到URL的路径中,例如:
```javascript
this.$router.push({ path: '/user/123' })
```
这样会跳转到/user/123页面,并且在该页面中可以通过this.$route.params来获取参数。
使用query传参时,参数会被编码到URL的查询字符串中,例如:
```javascript
this.$router.push({ path: '/user', query: { id: 123 }})
```
这样会跳转到/user页面,并且在该页面中可以通过this.$route.query来获取参数。
如果你使用query传参时,跳转后刷新页面导致参数消失,可能是因为刷新页面会重新加载页面,从而导致之前的参数丢失。为了解决这个问题,可以将参数存储到Vuex或者localStorage中,这样刷新页面后仍然可以获取到参数。
另外,如果你使用params传参时,跳转后刷新页面也会导致参数消失。这时候也可以将参数存储到Vuex或者localStorage中,或者考虑使用query传参。
阅读全文