关于路由传参的几种形式（青春版）

路由传参的几种方式

我们在需要根据不同的参数去请求一些带有标识的数据去更新页面的时候，往往要用到路由传参。
常用的路由传参的形式有：query传参，params传参，动态路由传参。
可以从this.$router.push()括号里参数的形式看出来是什么传参方式。
query传参不经过服务器，安全性较低，而且参数会暴露在地址栏，安全性较低，但是在请求一些无关紧要的数据的时候，比较自由；
params传参经过服务器，需要经过服务器处理验证，参数存在于请求体中，安全性较高，适合一些需要验证的场景；
在选择用什么传参方式传参时，一定要严格参考接口文档，不是说想用什么形式就用什么形式。
如果你没有选择正确的传参方式，可能会造成参数丢失的情况，从而请求不到数据。

query传参的实例：

传出：this.$router.push({path:"/这里填写地址/",query:{key:value}});
还可以直接写成拼接的形式：this.$router.push(`/这里填写地址/?key=${value}`)；
接收： let variable=this.$route.query.key;
发送请求： axios.get(`/这里填写地址?query=${variable}`)

对于query传参来说，其实传的参数是value，就是query后面的k-v键值对的v值。接受是在跳转后的页面用this.$route.query.key（就是就是query后面的k-v键值对的k值）。query可以传多个参数，就是有好几个k-v键值对，在地址栏上多个参数由&符号连接。

params传参的实例：

传出： this.$router.push({name:"Searchdata",params:{key:value}});
接收： let txt=this.$route.params.key;
发送请求： axios.get('这里填写地址,{params:{key:value}})

params传参基本上跟query传参的正式形式一样，只是第一个参数路径path变成了name，其他的都一样，发送请求时，也是不能够用拼接的形式的。

动态路由传参的实例：

//需要先在路由配置文件的path后面加上一个：变量名字，比如:variable
传出：this.$router.push(`/这里填写地址/${value}`)；
接收：let variable=this.$route.params.variable;
发送请求：根据接口文档的需求而定，传入query参数还是params参数

动态路由传参需要先配置一下路由的path属性，就是在路径后加上:变量名，变量名字是随意起的，是后面接收参数时的标识。传出的时候直接把要传的值拼接在地址后面，接收是用params接收，后面跟你起的变量名。发送请求的形式根据具体要求而定。