Vue中两种路由传参方式及其区别
5星
- 浏览量: 0
- 大小:None
- 文件类型：PDF
简介：
本文详细介绍了在Vue框架下实现页面间参数传递的两种主要方法，并探讨了它们各自的优缺点及适用场景。
前言：
最近项目需要实现页面的快捷操作功能，在跳转路由时需携带参数到另一个页面进行搜索操作。由于我主要负责后台开发，并不熟悉前端技术，查阅了大量文档后终于成功实现了这一需求，现整理相关笔记分享给大家。
第一种情况：使用params传参（适用于vue版本小于2.2）
快捷操作页面：
HTML代码：
```html
跳转
```
JavaScript代码：
```javascript
this.$router.push({ name: targetPage, params: { param1: value1, param2: value2 } });
```
目标页面：
在目标页面的路由监听函数中接收参数。
注意事项：使用params传参类似于POST请求，刷新后参数会丢失。
第二种情况：使用query传参（适用于vue版本小于2.2）
快捷操作页面：
HTML代码：
```html
跳转
```
JavaScript代码：
```javascript
this.$router.push({ name: targetPage, query: { param1: value1, param2: value2 } });
```
目标页面：
在目标页面的路由监听函数中接收参数。
注意事项：使用query传参类似于GET请求，参数会附加到URL后面，刷新后不会丢失。
全部评论 (0)
还没有任何评论哟~
