vue3中动态路由参数和查询参数的获取方法

💡 一则也许对你有用的小广告 🏆

欢迎飞飞程序员   ，你将获得：专属的实战项目（已更新的所有会员标识的项目都能学习） / 1v1 提问 / Java 学习路线 / PHP 学习路线 / 学习打卡 / 社群讨论

• 正在进行中的项目:《FFBlog知识付费博客项目》 正在持续更新中，基于 Spring Boot 3.x + JDK 21...，[**点击查看**] ;
• 《从零开发：FFBlog知识付费博客项目（全栈开发）》 演示链接： https://ffblog.ffcxy.com/  ;

截止目前， 飞飞  正在疯狂爆肝实战项目，后续还会上新更多项目，目标是将所学知识开发成项目并且分享给大家，如知识付费系统, Ai系统, CMS系统，在线商城系统，等等 ，欢迎点击围观

在 Vue Router 中，route.params 和 route.query 是两种不同的方式用于传递和获取路由参数，它们的用途和场景有显著区别。下面详细解释它们的区别和用法：

1. route.params.articleId（动态路由参数）

特点

• 定义方式：在路由配置中通过 :paramName 定义动态参数。
• URL 格式：/path/:articleId → 实际 URL 为 /path/123（无 ? 或 &）。
• 参数位置：属于路径的一部分（path 段）。
• 类型：通常是字符串或数字（需手动转换类型）。
• 刷新保留：刷新页面后参数仍然存在（因为是路径的一部分）。

路由配置示例

// router.js
const routes = [
  {
    path: '/article/:articleId', // 动态参数
    component: ArticleDetail,
  },
];

使用场景

• 用于必传参数（如文章 ID、用户 ID）。
• 参数是路径的一部分（如 RESTful 风格 /article/123）。

代码示例

// 访问 URL: /article/123
const route = useRoute();
const articleId = route.params.articleId; // "123"（字符串类型）

// 转换为数字（如果需要）
const id = Number(articleId);

2. route.query.articleId（查询参数）

特点

• 定义方式：通过 ?key=value 或 &key=value 传递参数。
• URL 格式：/path?articleId=123（以 ? 开头，& 分隔多个参数）。
• 参数位置：属于查询字符串（search 段）。
• 类型：始终是字符串（需手动转换类型）。
• 刷新保留：刷新页面后参数仍然存在（因为是 URL 的一部分）。
• 可选性：参数是可选的（不传时 route.query.articleId 为 undefined）。

路由配置示例

// router.js
const routes = [
  {
    path: '/article', // 无动态参数
    component: ArticleList,
  },
];

使用场景

• 用于可选参数（如搜索关键词、分页、排序条件）。
• 参数不直接影响路由匹配（如 /article?page=2&sort=desc）。

代码示例

// 访问 URL: /article?articleId=123
const route = useRoute();
const articleId = route.query.articleId; // "123"（字符串类型）

// 处理可选参数
if (articleId) {
  const id = Number(articleId);
  console.log(id); // 123
}

3. 核心区别对比

4. 如何选择？

• 用 params 如果：

  • 参数是路径的一部分（如 /user/1）。
  • 参数是必传的（如文章 ID）。
  • 需要更简洁的 URL（无 ? 和 &）。

• 用 query 如果：

  • 参数是可选的（如搜索、分页）。
  • 需要传递多个条件（如 ?page=1&sort=desc）。
  • 不影响路由匹配（如 /article 和 /article?id=1 是同一个路由）。

5. 综合示例

场景：文章详情页 + 分页

// 路由配置
const routes = [
  {
    path: '/article/:articleId', // 动态参数（必传）
    component: ArticleDetail,
  },
  {
    path: '/articles', // 查询参数（可选）
    component: ArticleList,
  },
];

访问方式

1. 动态参数（params）

   // URL: /article/123
   const { articleId } = route.params; // "123"
   

2. 查询参数（query）

   // URL: /articles?page=2&sort=desc
   const { page, sort } = route.query; // { page: "2", sort: "desc" }
   

6. 注意事项

1. 类型转换
   params 和 query 获取的值默认是字符串，需手动转换为数字（如 Number(articleId)）。
2. 响应式
   route.params 和 route.query 都是响应式的，可以在 watch 或 computed 中使用。

3. 路由跳转传参

   // 使用 params
   router.push({ path: '/article/123' });
   
   // 使用 query
   router.push({ path: '/articles', query: { page: 2 } });
   

总结

• params → 用于路径中的必传参数（如 /article/123）。
• query → 用于可选的查询条件（如 ?page=1&sort=desc）。
• 根据业务需求选择合适的方式，甚至可以组合使用（如 /article/123?from=home）。