版权声明： https://blog.csdn.net/youth_lx/article/details/79780938
<div class="markdown_views">
<!-- flowchart 箭头图标 勿删 -->
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path></svg>
<h4 id="最近在学vue今天做项目时踩到了vue-router传参的坑query和params所以决定总结一下二者的区别">最近在学vue，今天做项目时踩到了vue-router传参的坑（query和params），所以决定总结一下二者的区别。</h4>
<h2 id="直接总结干货"><a name="t0"></a>直接总结干货！！！</h2>
<h3 id="1query方式传参和接收参数"><a name="t1"></a>1.query方式传参和接收参数</h3>
<pre class="prettyprint" name="code"><code class="hljs css has-numbering">传参:
<span class="hljs-tag">this</span>.$<span class="hljs-tag">router</span><span class="hljs-class">.push</span>(<span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">path</span>:<span class="hljs-value"><span class="hljs-string">'/xxx'</span>
query:{
id:id
</span></span></span>}
})
接收参数:
<span class="hljs-tag">this</span>.$<span class="hljs-tag">route</span><span class="hljs-class">.query</span><span class="hljs-class">.id</span></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li></ul></pre>
<p><code>注意:传参是this.$router,接收参数是this.$route,这里千万要看清了！！！</code></p>
<h3 id="2params方式传参和接收参数"><a name="t2"></a>2.params方式传参和接收参数</h3>
<pre class="prettyprint" name="code"><code class="hljs cs has-numbering">传参:
<span class="hljs-keyword">this</span>.$router.push({
name:<span class="hljs-string">'xxx'</span>
<span class="hljs-keyword">params</span>:{
id:id
}
})
接收参数:
<span class="hljs-keyword">this</span>.$route.<span class="hljs-keyword">params</span>.id</code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li></ul></pre>
<p><code>注意:params传参，push里面只能是 name:'xxxx',不能是path:'/xxx',因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined！！！</code></p>
<h3 id="另外二者还有点区别直白的来说query相当于get请求页面跳转的时候可以在地址栏看到请求参数而params相当于post请求参数不会再地址栏中显示"><a name="t3"></a>另外，二者还有点区别，直白的来说query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示</h3>
<p><img src="https://ljzjiang.github.io/PictureLibrary/animal/20140710050947_mM3TP.thumb.700_0.jpeg" alt="加油" title=""></p>
<p><strong>vue的自学之路还得继续走，坑还会继续踩，下一个坑会是神马…</strong></p> </div>