前端传参中query和params的区别_qiankun params参数-CSDN博客

本文链接：https://blog.csdn.net/weixin_45140796/article/details/94569722

传参是前端经常需要用的一个操作，很多场景都会需要用到上个页面的参数，本文将会详细介绍vue router 是如何进行传参的，以及一些小细节问题。
Vue Router如何传参？
query和params是什么？
1、query：（/Info?id=123456789； /Info?uid=666；等）url地址栏中是这样的形式则是query
2、params：（/Info/:id；/Info/123456789；/Info/666）url地址栏中是这样的形式则是params
一、使用params方式传参：

this.$router.push({
	name:'Info',
	params:{
			id: 'xxx'
	}
})

获取参数：this.$route.params.id
注：这种方式需要在路由（router.js）中写入参数名，并且在传参时参数名要和路由后面的参数名相对应。如果不在路由后面写参数，页面也可以跳转，参数也可以传进去，但是url地址栏上不会出现参数名和参数值，这样造成的后果就是当你跳到别的页面或者再次刷新页面时，传进来的参数会丢失，这样整个页面中依赖这个参数的操作就会失效。
eg：

二、使用query方式传参：

this.$router.push({
	name:'Info',
	query:{
    	id:'xxx'
    }
})

获取参数：this.$route.query.id
这种方式就比较随意了，他不用像第一种方法一样往路由后添加参数名，它是直接拿来就可以用，最后直接会在url地址栏中出现参数名和参数值，并且跳转和刷新后参数不会丢失。
注：这两种方法都会把参数值显示在url地址栏中，如果有些数据不想暴露，则不建议使用！！！