Vue Router如何传递参数？

在Vue Router中，组件间通过路由传递参数是常见需求。这主要分为两大类：通过URL路径参数（params）和通过查询字符串（query）。它们适用于不同的场景，并影响URL的外观和参数的可选性。

路径参数（Params）：作为URL的一部分

路径参数将数据嵌入到URL路径中，常用于标识资源的唯一ID或固定分类。你需要先在路由配置中定义参数占位符。

const routes = [
  {
    path: '/user/:id', // :id 是参数占位符
    component: UserDetail
  },
  {
    path: '/article/:category/:slug',
    component: Article
  }
];

导航时，你可以通过params对象传递具体的值。参数会成为URL的一部分，刷新页面后参数依然存在。

<!-- 在模板中 -->
<router-link :to="{ name: 'user', params: { id: 123 } }">用户</router-link>
<!-- 或编程式导航 -->
<script>
this.$router.push({ name: 'user', params: { id: 123 } });
</script>

生成的URL类似/user/123。在目标组件中，通过this.$route.params访问这些参数。

查询参数（Query）：位于URL的?之后

查询参数以?key=value&key2=value2的形式附加在URL末尾。它不要求在路由配置中预先声明，通常用于可选过滤条件、分页或搜索关键词。

// 路由配置无需特殊声明
{
  path: '/search',
  component: SearchResults
}

导航时，通过query对象传递参数。

<router-link :to="{ path: '/search', query: { q: 'vue', page: 2 } }">搜索</router-link>
<script>
this.$router.push({ path: '/search', query: { q: 'vue', page: 2 } });
</script>

生成的URL类似/search?q=vue&page=2。在目标组件中，通过this.$route.query访问。

Props解耦：更优雅的接收方式

在组件内直接依赖$route会使组件与路由紧密耦合。Vue Router允许你将路由参数作为props传递给组件，使组件更独立、可复用。

const routes = [
  {
    path: '/user/:id',
    component: UserDetail,
    props: true // 将 params 自动映射为组件的 props
  },
  {
    path: '/search',
    component: SearchResults,
    props: (route) => ({ query: route.query.q, page: route.query.page }) // 函数模式更灵活
  }
];

在组件中，你可以像普通props一样接收它们。

<script>
export default {
  props: ['id', 'query', 'page']
}
</script>

选择与组合

• 使用路径参数：当参数是标识资源（如用户ID、文章slug）且对URL结构有要求时。它使URL更清晰、更语义化。
• 使用查询参数：当参数是可选、多值或复杂对象时（如筛选、排序、分页）。它更灵活，且不影响基础路径。

在实践中，可以组合使用。例如，一个商品列表页可能使用路径参数/category/electronics表示分类，同时使用查询参数/category/electronics?sort=price&page=2进行排序和分页。理解这些模式能帮助你设计出清晰、可维护的路由结构。