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的参数是拼接起来的，没有也不影响

我们读官方文档的时候，可能也没有发现这么多坑，哈哈，还是一步一步慢慢填坑吧