[JavaScript知识库]路由中的query 和 params的传参方式区别和详解

1 Vue router如何传参

params、query是什么？
params：/router1/:id ，/router1/123，/router1/789 ,这里的id叫做params
query：/router1?id=123 ,/router1?id=456 ,这里的id叫做query。

2 注意 $ route和$router的区别：

需要注意的是：传参是this. $ router ,而接收参数是this.$route,千万要小心哟！！！
$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。

而$router是“路由实例”对象包括了路由的跳转方法，钩子函数等。

3关于路由传参的区别：

1：query方式传参和接收参数：

传参: 
this.$router.push({
        path:'/xxx'
        query:{
          id:id
        }
      })
 
接收参数:
this.$route.query.id

2：params方式传参和接收参数：

传参: 
this.$router.push({
        name:'xxx'
        params:{
          id:id
        }
      })
 
接收参数:
this.$route.params.id

注意：params传参只能以name来引导路由，并且push里面只能以name：‘xxx’的形式，不能是path:’/xxx’，如果混用，接收页面会显示undefined！！！

4params传参和query传参有什么区别：

(1)、用法上的

刚query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name。

注意接收参数的时候，已经是$route而不是$router了哦！！

(2)、展示上的

query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示

query:

params:

(3)、params是路由的一部分,必须要有。query是拼接在url后面的参数，没有也没关系。
params一旦设置在路由，params就是路由的一部分，如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容。
比如：跳转/router1/:id

<router-link :to="{ name:'router1',params: { id: status}}" >正确</router-link>
<router-link :to="{ name:'router1',params: { id2: status}}">错误</router-link>

(4)、params、query不设置也可以传参，params不设置的时候，刷新页面或者返回参数会丢失，这一点的在上面说过了

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖