vue路由传参params和query区别

Posted 2023-05-04

参考技术A params：路由配置时候要在路径后面加动态配置的参数名 如：/:id，强制刷新会被清空，参数不会显示在路径地址上，

query：路由配置的时候path不用带参数

路由传参 query 和 params

参考技术A vue路由传参分为两种情况：

一、query和params传参的区别：

1、query传参显示参数，params传参不显示参数，params相对于query来说较安全一点。

2、取值方法也有不同：query取值：this.$route.query.XXX || this.$route.params.xxx

3、query传值页面刷新数据还在，而params传值页面数据消失。

二、各自写法：

query

组件写法(help.vue)：

方式一：

方式二：

接受写法（home.vue）

页面渲染（home.vue）:

query参数赋值到data：

组件写法（about.vue）：

方式二：

路由写法：

接受写法：

页面渲染：