【vue3】路径上的参数（params / query）

params 和 query的区别

众所周知 , params 和 query 都可以在页面跳转的时候传递参数。
但是，它们是有区别的!!!

query

query参数紧接URL后面，在地址栏上可以看见。相当于 get 请求
举例：urlPath?queryDataOne=12&queryDataTwo=12

params

params参数是路由的一部分，以对象形式传递参数。相当于post请求
使用params传参只能由name引入路由。
举例：urlPath/:queryDataOne/:queryDataTwo

在vue3中，params和query是怎样传参和接收参数的呢？？

<script setup>
import { reactive, ref } from 'vue';
import { useRoute,useRouter } from 'vue-router'
//  useRoute 相当于vue2中的this.$route(),表示当前的路由对象
//  useRouter 相当于vue2中的this.$router(),表示全局的路由对象

const router = useRouter()
// 获取页面参数
const query = reactive(router.currentRoute.value.query)
const params = reactive(router.currentRoute.value.params)
const pageType = ref(params.type || '') 
console.log('页面参数：', query, params) 

// 传参 query
const transPage= ()=>{
	router.push({
		path:'/pageOne',
		query:{
			type:1,
			name:2,
		}
	})
}

// 传参params
const transPage2= ()=>{
	router.push({
		name:'pageTwo',
		params:{
			type:1,
			name:2,
		}
	})
}

</script>