Vue params 和 query 傳參的 區別

今天我們就來說一下params和query傳參的使用和區別，要說這個的話，我們就有必要提一下Vue-router了。
Vue-router它主要分爲動態路由（傳參匹配的問題），嵌套路由（父子組件之間的通信），編程式路由（this.$router.push(‘絕對路徑’)），這三方面的內容都是比較容易的，我們參考官方給出的文檔就可以理解的差不多，Vue-router官方文檔。
我們今天主要來說比較令人困惑的兩點：

• $route和$router的區別
• params 和query 的傳參及使用

$route和$router的區別

我們首先來看一段代碼：

this.$router.push({
		path: '/cart',
		query:{
			 goodsid: 123456
			 }
		});
this.goodsid = this.$route.query.goodsid;         //123456

從上面的代碼段我們能夠看出來，$ router是路由操作對象，對要跳轉的路由進行編寫，而使用$ route我們來從瀏覽器中讀取路由參數，總而言之，$ router只寫要跳轉的路由， $ route 只讀（參數的獲取）

params 和query 的傳參及使用

params傳參的使用

我們先來看看params的使用：

//goodlist.vue
<router-link v-bind:to="{name: 'cart',  params: {goodsid: 123456
		}}">
		顯示購物車的頁面
</router-link>

//index.js中的路由配置
{
    		path: '/cart/:goodsid',
    		name: 'cart',
    		component: cart, 
}
//cart.vue  獲取路由傳參
<template>
	<div>
		<p>這個是一個購物車頁面</p>
		<span>{{ $route.params.goodsid }}</span>
	</div>
</template>

代碼效果圖：

由以上代碼和圖片我們可以瞭解到—使用params傳參可以用name引入
那以path引入呢？我們來看看：

//goodlist.vue
<router-link v-bind:to="{path: '/cart',  params: {goodsid: 123456
		}}">
		顯示購物車的頁面
</router-link>

其餘的代碼是不變的，但是我們卻看不到網頁。

所以，params進行路由傳參的時候只能由name引入。

query傳參的使用

//query傳參使用name進行引入
<router-link v-bind:to="{name: 'cart', query: {goodsid: 123456
		}}">
		顯示購物車的頁面
</router-link>
//獲取瀏覽器中路由的參數
<span>{{ $route.query.goodsid }}</span>


//query傳參使用path進行引入
<router-link v-bind:to="{path: 'cart', query: {goodsid: 123456
		}}">
		顯示購物車的頁面
</router-link>
//獲取瀏覽器中路由的參數
<span>{{ $route.query.goodsid }}</span>

有趣的是，使用path和name引入，結果是一樣的

所以，query傳參的時候，以path，name引入都是OK的

總結（tips）：

1. 使用query傳參的時候，name，path都可以引入，但使用params傳參的時候只能使用name進行引入。
2. 接收參數的時候使用this.$ route.params.name或者this.$ route.query.name
3. 進行路由跳轉的時候，我們使用this.$ router.push('路徑')
4. 如果index.js配置路由時，我們能看到，params的參數是URL不可或缺的一部分，但是query的參數是拼接起來的，沒有也不影響

我們讀官方文檔的時候，可能也沒有發現這麼多坑，哈哈，還是一步一步慢慢填坑吧