vue router中params和query传参的区别
时间: 2023-06-03 18:06:51 浏览: 90
params和query都是在路由跳转时传递参数的方式,但是它们的传递方式不同。params参数是直接绑定在路由路径上,形式是 /path/:paramName,query参数则是通过 ?key=value 的形式添加在路由地址后面。
对于params参数,路由定义中的path必须包含对应的参数名,否则会匹配失败。而对于query参数,则可以有或者没有,不影响路由匹配。
另外,params参数不方便在路由地址中直接修改,需要在代码中通过$router.push方法来改变,而query参数能够直接在路由地址中修改,比较灵活。
相关问题
vue-router 的params query传参
在使用 Vue.js 进行前端开发时,经常需要进行页面的跳转和参数的传递。Vue.js 提供了一个官方的路由插件 vue-router,可以方便地进行页面的跳转和参数的传递。
vue-router 支持两种方式进行参数传递:params 和 query。
params 传参:
params 是路由路径中的占位符,可以通过 $route.params 来获取传递的参数。使用 params 传参时,需要在定义路由规则时使用冒号将参数名包裹起来,例如:
```javascript
const router = new VueRouter({
routes: [
{
path: '/user/:id',
component: User
}
]
})
```
在上面的例子中,定义了一个 /user/:id 的路由规则,其中 :id 是一个占位符,可以接受任意的参数。
在组件中访问传递的参数时,可以通过 $route.params.id 来获取:
```javascript
const User = {
template: '<div>User {{ $route.params.id }}</div>'
}
```
在使用 params 传参时需要注意,如果在同一个路由规则下,参数发生变化时不会触发组件的生命周期钩子函数,需要通过 watch 监听 $route 对象来实现:
```javascript
const User = {
template: '<div>User {{ id }}</div>',
watch: {
'$route.params.id' (to, from) {
this.id = to
}
},
data () {
return {
id: ''
}
}
}
```
query 传参:
query 是通过 URL 的查询字符串传递参数,可以通过 $route.query 来获取传递的参数。使用 query 传参时,需要在定义路由规则时使用问号将参数名包裹起来,例如:
```javascript
const router = new VueRouter({
routes: [
{
path: '/user',
component: User
}
]
})
```
在组件中访问传递的参数时,可以通过 $route.query.id 来获取:
```javascript
const User = {
template: '<div>User {{ $route.query.id }}</div>'
}
```
在使用 query 传参时需要注意,参数的值会被转换为字符串类型,如果需要传递数组或对象等复杂数据类型,需要将其转换为 JSON 字符串。在组件中获取参数时需要使用 JSON.parse 解析字符串。例如:
```javascript
// 在路由中传递数组参数
router.push({ path: '/user', query: { ids: JSON.stringify([1, 2, 3]) } })
// 在组件中获取数组参数
const User = {
template: '<div>User {{ ids }}</div>',
computed: {
ids () {
return JSON.parse(this.$route.query.ids)
}
}
}
```
请举例vue-router中的params传参和query传参
1. params传参:
在路由配置中定义路由参数,例如:
```
const routes = [
{
path: '/user/:id',
component: User
}
]
```
在组件中通过$route对象获取路由参数,例如:
```
<template>
<div>
<h2>User {{ $route.params.id }}</h2>
</div>
</template>
```
2. query传参:
在路由配置中定义query参数,例如:
```
const routes = [
{
path: '/user',
component: User,
props: (route) => ({ id: route.query.id })
}
]
```
在组件中通过props接收路由参数,例如:
```
<template>
<div>
<h2>User {{ id }}</h2>
</div>
</template>
<script>
export default {
props: ['id']
}
</script>
```
在路由跳转时使用query传参,例如:
```
<router-link :to="{ path: '/user', query: { id: '123' } }">User</router-link>
```