query和params两种路由传参

Posted 2023-05-05

参考技术A 路由表,配置的整个项目中可以访问的所有的路由信息
建议每一个路由都加一个name属性，在页面跳转的时候使用
建议name不能重复
ex>

$router.push

1.query 表示参数在url后面进行传递，参数直接拼在url地址栏的后面，用？分割一下，多个参数用&分割

2.params 表示在routes定义的时候可以使用 “：参数名”的形式进行占位处理

Vue-路由传参 params 与 query的使用和区别

参考技术A

记得初学Vue的时候，不知道如何通过路由跳转界面并传参，去面试也有问到，当时就很尴尬，这么基础的东西说出来不知道，没用过，真的好难堪，谁也不是一开始就什么都会，不懂得及时去查，时间长了总会理解，孰能生巧，这不最近在我工作中常常有跳转页面的需求，下面我跟大家说说params和query两种方式的区别

query传参：

params传参：

需要注意的是：
1、params是路由的一部分,必须要在路由后面添加参数名。query是拼接在url后面的参数，没有也没关系。
2、params一旦设置在路由，params就是路由的一部分，如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容。
如果路由后面没有 /:id/:name效果如下图，地址栏没有参数
**但是如果你刷新一下，就会发现页面失败，此时我们就可以 路由解耦
得方式来解决，具体得操作请看： https://www.jianshu.com/p/9583a3b56475
**