版權宣告： 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>