vue-router query和params传参

本文详细解析了Vue Router中两种参数传递方式:query与params。介绍了如何使用this.$router.push进行参数传递,以及如何在目标组件中通过this.$route接收参数。强调了params传参时必须使用name属性而非path,并对比了query与params的区别,前者类似GET请求,后者类似POST请求。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.query方式传参和接收参数

传参: 
this.$router.push({
        path:'/xxx',
        query:{
          id:id
        }
      })
  
接收参数:
this.$route.query.id

注意:传参是this.$router,接收参数是this.$route

this.$router 和this.$route有何区别?
在控制台打印两者可以很明显的看出两者的一些区别:

 

  • 1.$router为VueRouter实例,想要导航到不同URL,则使用$router.push方法
  • 2.$route为当前router跳转对象,里面可以获取name、path、query、params等

2.params方式传参和接收参数

传参: 
this.$router.push({
        name:'xxx',
        params:{
          id:id
        }
      })
  
接收参数:
this.$route.params.id

注意:params传参,push里面只能是 name:'xxxx',不能是path:'/xxx',因为params只能用name来引入路由,如果这里写成了path,接收参数页面会是undefined!!!

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

在使用 Vue.js 进行前端开发时,经常需要进行页面的跳转参数的传递。Vue.js 提供了一个官方的路由插件 vue-router,可以方便地进行页面的跳转参数的传递。 vue-router 支持两种方式进行参数传递:params queryparams 传参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) } } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值