剖析 Vue 路由的传参奥妙：params 与 query 的细微差别

Vue 路由传参简介

Vue 路由是一种流行的 JavaScript 框架，用于构建单页面应用程序。它允许您在应用程序中定义不同的路由，并通过 URL 来切换这些路由。在路由之间切换时，您可能需要向路由组件传递一些参数，以便组件能够根据这些参数来渲染不同的内容或执行不同的操作。

params 与 query 的区别

在 Vue 路由中，params 和 query 都是用于向路由组件传递参数的工具，但它们的使用方式和适用场景却有所不同。

• params： params 用于传递动态路由参数。动态路由参数是指在路由路径中定义的变量部分。例如，在以下路由定义中，/user/:id 中的 :id 就是一个动态路由参数：

const routes = [
  {
    path: '/user/:id',
    component: User
  }
];

• query： query 用于传递查询字符串参数。查询字符串参数是指在 URL 中 ? 号后面的参数。例如，在以下 URL 中，?page=2 就是一个查询字符串参数：

/user?page=2

params 的使用场景

params 主要用于传递与当前路由相关的参数。例如，在用户详情页面，您可能需要传递用户的 ID，以便组件能够根据 ID 来获取用户的数据。此时，您就可以使用 params 来传递用户的 ID。

const routes = [
  {
    path: '/user/:id',
    component: User
  }
];

// 在组件中获取参数
export default {
  mounted() {
    const id = this.$route.params.id;
    // 使用 id 来获取用户数据
  }
};

query 的使用场景

query 主要用于传递与当前路由无关的参数。例如，在搜索页面，您可能需要传递搜索关键词，以便组件能够根据关键词来搜索相关的内容。此时，您就可以使用 query 来传递搜索关键词。

// 在组件中获取参数
export default {
  mounted() {
    const keyword = this.$route.query.keyword;
    // 使用 keyword 来搜索相关的内容
  }
};

总结

params 和 query 都是 Vue 路由中用于向路由组件传递参数的工具，但它们的使用方式和适用场景却有所不同。params 用于传递动态路由参数，而 query 用于传递查询字符串参数。在实际项目中，您应该根据具体的需求来选择合适的参数传递方式。