Vue params 和 query 传参的区别

最新推荐文章于 2024-07-07 16:56:53 发布

原创最新推荐文章于 2024-07-07 16:56:53 发布 · 8.8k 阅读

30 ·

CC 4.0 BY-SA版权

文章标签：

#$route #params #query #vue

Vue 学习总结专栏收录该内容

5 篇文章

订阅专栏

本文深入探讨Vue-router中params和query传参的区别与使用方法，解析路由操作对象$router与路由参数读取对象$route的不同，以及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传参进去就是URL的一部分，所以不能缺少
由以上代码和图片我们可以了解到—使用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的