Vue Router: 详解参数传递 - params与query的区别与用法

query传参和params传参的区别

路由的query参数

特点：路径后面有?参数，表示的是query传参 1.字符串写法

<router-link  :to="`/cats/detail?age=${cat.name}&age=${cat.age}&sex=${cat.sex}`">详细信息</router-link>

2.对象写法:

<router-link :to="{
   path:'/cats/detail',
   query:{
     name:cat.name,
     age:cat.age,
     sex:cat.sex
   }
 }"> 
 路由详细信息
 </router-link>

3、接收参数 $route.query.xxx

路由的params参数

1、配置路由，声明params传参，通过占位符号声明params传参

{

name:'xiangqing',

path:'detail/:name/:age/:sex',

component:Detail
}

2.传递参数

<router-link :to="`/cat/detail/${cat.name}/${cat.sex}/${cat.age}`">

② 对象写法

 <router-link :to="{ name:'xiangqing', params:{ name:cat.name, age:cat.age, sex:cat.sex } }"

params 接受参数：接收参数

  $route.params.xxx

params和query代码对比

路由params传参与query传参代码对比 其他代码相同，变更代码对比 router/index.js代码变更对比

//接收query参数
children:[
	{
		path:'detail',
		component:Detail,
	}
]

//声明接收params
children:[
       {
           //开启命名空间
           name:'xiangqing',
           //占位符声明params参数
           path:'detail/:name/:age/:sex',
           component:Detail,
       }
   ]

Cats路由变更代码对比

<!-- query传参第一种方法：字符串传参 -->
<router-link :to="`/cats/detail/?name=${cat.name}&age=${cat.age}&sex=${cat.sex}`">详细信息</router-link>
<!-- query传参第二种方法：对象传参 -->
<router-link 
	:to="{
		path:'/cats/detail',
		query:{
			name:cat.name,
			age:cat.age,
			sex:cat.sex
		}
	}"
>详细信息</router-link>

<!-- params传参第一种方法：字符串传参 -->
<router-link :to="`/cats/detail/${cat.name}/${cat.age}/${cat.sex}`">详细信息</router-link>
<!-- params传参第二种方法：对象传参 -->
<router-link 
	:to="{
		name:'xiangqing',
		params:{
			name:cat.name,
			age:cat.age,
			sex:cat.sex
		}
	}"
>详细信息</router-link>

总结

1、query传参需要在路径中使用 ？ 声明

2、params传参需要现在路由中使用 占位符 声明

3、query传参对象写法

 <router-link 
    :to="{
          path:'/cats/detail',
          query:{
            name:cat.name,
            age:cat.age,
            sex:cat.sex
          }
    }"
>详细信息</router-link>
​

params传参对象写法

 <router-link 
    :to="{
          name:'xiangqing',
          params:{
            name:cat.name,
            age:cat.age,
            sex:cat.sex
      }
    }"
>详细信息</router-link>
​

5、路由携带params参数时，若router-link中的to使用对象写法，则不能使用path配置项，必须使用路由命名name配置项

（不可以用path和params配置的组合, 只能用name和params配置的组合）

6、可以在配置路由params传参时，在占位的后面加上一个 ？ 号，代表params 参数可传可不传

{
    name:"miaomiao"
    path:"/cats/:id?",
    component:Cats,
},

需要注意的是：

0. params是路由的一部分,必须要在路由后面添加参数名。query是拼接在url后面的参数，没有也没关系。
1. params一旦设置在路由，params就是路由的一部分，如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容。

3.总结 传参可以使用params和query两种方式。 使用params传参只能用name来引入路由，即push里面只能是name:’xxxx’,不能是path:’/xxx’,因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined！！！。

使用query传参使用path来引入路由。 params是路由的一部分,必须要在路由后面添加参数名。query是拼接在url后面的参数，没有也没关系。

二者还有点区别，直白的来说query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示。