query 和 params 区别

query 和 params 传参方式区别

通过上面2节我们学习了使用 query 和 params 2种方式进行路由传参，现在我们讨论一下他们的区别

1. 路由定义

# query 方式: 定义 path 即可。

# params 方式 : 需要定义 path 和 name， 此处注意 : 通过 path 的定义，如 : /User/:id/name 可以有效地控制路由参数完整性（ 参数不完整会报错 ），也可以有效地隐藏参数名称

2. 浏览器路径形式

# query 方式 : http://localhost:3001/#/User?id=12&name=lesscode

# params 方式 : http://localhost:3001/#/ParamsDemo/12/lesscode

3. 获取参数数据

# query 方式 : 
import { onMounted, ref } from "vue";
import { useRoute }       from "vue-router";
const uid   = ref(0);
const uname = ref('lesscode');
const route = useRoute();
onMounted(()=>{
	let queryData = route.query;
	console.log(queryData);
	if(queryData.id){
		uid.value     = queryData.id;
		uname.value   = queryData.name;
	}
});

# params 方式 : 
import { onMounted, reactive } from "vue";
import { useRoute } from "vue-router";
const paramsData = reactive({id:0});
onMounted(()=>{
	const route = useRoute();
	console.log(route.params);
});

总结

了解了 query 和 params 的区别，我们不应该去讨论他们的好坏，而是在适合的场景使用合适的模式 ~