「params」params传参和query传参

params

写下前面：当你使用params方法传参的时候，要在路由后面加参数名，并且传参的时候，参数名要跟路由后面设置的参数名对应。使用query方法，就没有这种限制，直接在跳转里面用就可以。

注意：如果路由上面不写参数，也是可以传过去的，但不会在url上面显示出你的参数，并且当你跳到别的页面或者刷新页面的时候参数会丢失（如下图所示），那依赖这个参数的http请求或者其他操作就会失败。

<template>

<p class="router1">

<h1>接收参数的路由</h1>

<h1> params.id：{{ $route.params }}</h1>

<h1>query.status:{{ $route.query.queryId }}</h1>

<keep-alive>

<router-view></router-view>

</keep-alive>

</p>

</template>

2.

params传参和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

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

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