Vue Router 用于在页面之间传递数据的两种方式

query 和 params 都是 Vue Router 用于在页面之间传递数据的方式，但它们的使用场景和传递方式有所不同。下面我会详细解释这两者的区别。

1. params (路径参数)

• 定义方式：params 是通过路由路径中的动态参数传递的。通常在路由配置中，使用 :paramName 这样的占位符来定义动态参数。
• 传递方式：当你使用 router.push 或 router-link 时，params 会替换路径中的占位符。

使用场景：

• params 适用于路由路径中的必需参数，表示某一资源的唯一标识符，例如文章ID、产品ID等。

例子：

1. 路由配置：

   const routes = [
     {
       path: '/user/:id', // :id 是一个动态路径参数
       name: 'User',
       component: UserComponent
     }
   ];
   

2. 传递 params：

   // 通过 router.push 来传递 params
   router.push({ name: "User", params: { id: 123 } });
   

   这里 id 就是一个路径参数，它会替代 /user/:id 中的 :id 部分，最终的 URL 会变成 /user/123。

3. 在目标组件中读取 params：

   const id = route.params.id; // 获取路径参数
   

特点：

• 路径参数 (params) 是 URL 的一部分，因此它们是必需的，必须在路由中定义并被传递。
• 路由参数不会暴露在浏览器的地址栏的查询字符串中。

2. query (查询参数)

• 定义方式：query 是通过 URL 的查询字符串传递的。查询字符串以 ? 开头，并且以 & 分隔多个参数。
• 传递方式：当你使用 router.push 或 router-link 时，query 会以键值对的形式附加在 URL 的末尾。

使用场景：

• query 适用于可选的参数，或者是用于进行筛选、分页等操作的参数，它们不是 URL 路径的一部分。

例子：

1. 路由配置：

   const routes = [
     {
       path: '/search', // 路由路径
       name: 'Search',
       component: SearchComponent
     }
   ];
   

2. 传递 query：

   // 通过 router.push 来传递 query
   router.push({ name: "Search", query: { query: "vue", page: 2 } });
   

   这里，URL 会变成 /search?query=vue&page=2。

3. 在目标组件中读取 query：

   const query = route.query.query; // 获取查询参数 query 的值
   const page = route.query.page;   // 获取查询参数 page 的值
   

特点：

• 查询参数 (query) 是 URL 的一部分，但它们通常是可选的，并且常用于传递筛选、分页等信息。
• 查询参数可以在浏览器地址栏中看到，例如：/search?query=vue&page=2。

总结：params 和 query 的区别

选择使用 params 还是 query：

• 如果需要传递 必需 的、标识资源 的信息（如用户ID、产品ID），应该使用 params。
• 如果传递的信息是 可选的 或者用于 筛选、分页、搜索 等场景，使用 query 更合适。