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

Posted 2023-03-08

参考技术A

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

query传参：

params传参：

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