本文主要是介绍路由_传递params参数和query参数，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
传递params参数
传递params参数可以直接在路径后面加上参数：
上述就是在路径变化的时候传过去三个值分别为哈哈、嘿嘿、呵呵的参数
但是这样的话会被认为三个参数是路径的一部分，计算机没有办法区分哪些是路径哪些是参数，所以首先要在这条路由规则下面占位
当路由器遇到"/news/details/哈哈/嘿嘿/呵呵"这样的路径的时候就去找对应的路由规则，就会知道后面三个是参数，且名字是id、title、contents，在被引用组件中要取得这三个参数就要有对应的名字
其次将参数传递出去，有两种写法
注意当使用对象类型的to写法传递params参数时要用路由的name属性，不能用path属性
最后在被引用的组件中获取参数
传递query参数
在传递路由的同时可以传递query参数和params参数
就是在展示新的组件的同时将本组件的一些参数传过去给新组件填充页面
首先在发生路由变化的组件，如News.vue中改变路径的同时传递参数
然后在路径变化之后引入的新组件Details.vue中接收参数
传递params参数总结：
1.在路由规则中占位，告诉路由器这个路径从哪个地方开始是参数以及参数的名称
2.在导航组件中用RouteLink来实现路由变化以及参数传递
3.在被引用组件中const route = useRoute()来获得路由,参数在route.params.参数名中
传递query参数总结：
1.在导航组件中用RouteLink来实现路由变化以及参数传递
2.在被引用组件中const route = useRoute()来获得路由,参数在route.query.参数名中
异同
1.params参数：只能使用name
:to="{
name:'xiangqing',
params:{
id:news.contents,
title:news.title,
contents:news.contents
}
}"
query参数：可以使用name也可以使用path
:to="{
path:'/news/details',
query:{
id:news.id,
title:news.title,
contents:news.contents
}
2.params参数需要在路由规则中占位，query参数是key=value的形式，且多个参数之间用&连接
这篇关于路由_传递params参数和query参数的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
