首页 前端知识 query和params的区别是什么

query和params的区别是什么

2024-09-09 00:09:32 前端知识 前端哥 146 105 我要收藏

queryparams 是 Vue Router 中传递路由参数的两种不同方式。它们的主要区别在于 URL 结构和获取参数的方法。

1. params

params 是用来传递路由路径中的动态参数。这些参数在路由路径中以冒号 (:) 表示。

路由配置:

{
  path: '/interviewApplication/:backpackId',
  name: 'interviewApplication',
  component: InterviewApplicationComponent
}

跳转代码:

this.$router.push({
  name: 'interviewApplication',
  params: { backpackId: item.backpackId }
});

获取参数:InterviewApplicationComponent 中,你可以通过 this.$route.params.backpackId 获取传递的参数。

URL 示例:

http://localhost:8080/interviewApplication/123

2. query

query 是用来传递查询参数,这些参数附加在 URL 路径的后面,格式类似于 URL 中的查询字符串。

路由配置:

{
  path: '/interviewApplication',
  name: 'interviewApplication',
  component: InterviewApplicationComponent
}

跳转代码:

this.$router.push({
  path: 'interviewApplication',
  query: { backpackId: item.backpackId }
});

获取参数:InterviewApplicationComponent 中,你可以通过 this.$route.query.backpackId 获取传递的参数。

URL 示例:

http://localhost:8080/interviewApplication?backpackId=123

总结

  • URL 结构

    • params:参数作为路径的一部分。
    • query:参数作为查询字符串的一部分。
  • 获取参数的方法

    • params:通过 this.$route.params
    • query:通过 this.$route.query
  • 使用场景

    • 如果参数是资源的标识符并且应该是路径的一部分,使用 params
    • 如果参数是可选的或用于过滤、排序等,使用 query

根据具体需求选择合适的方式。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/17961.html
标签
评论
发布的文章

JSON简介

2024-09-30 23:09:25

Node.js和npm的安装及配置

2024-09-30 23:09:02

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!