router link如何正确传递参数？

<router-link> 是 Vue Router 官方提供的导航组件，用于声明式地创建导航链接，它会被渲染成一个 <a> 标签，传递参数主要有两种方式：

1. 查询参数
2. 路径参数

这两种方式的区别在于 URL 的表现形式以及如何在目标组件中获取参数。

查询参数

查询参数通过 URL 的 后面添加 key=value 的形式传递，多个参数用 & 连接。

如何使用 <router-link> 传递查询参数

使用 to 属性绑定一个对象，该对象包含 query 属性。

语法：

<router-link :to="{ path: '目标路径', query: { 参数名1: 值1, 参数名2: 值2 } }">
  点击我
</router-link>

示例：

假设我们有一个商品列表,点击某个商品要跳转到商品详情页，并传递商品 ID。

源组件 (Home.vue):

<template>
  <div>
    <h1>商品列表</h1>
    <ul>
      <!-- 使用查询参数传递商品ID -->
      <li>
        <router-link :to="{ path: '/product/detail', query: { id: 101, name: '笔记本电脑' } }">
          商品 101 (笔记本电脑)
        </router-link>
      </li>
      <li>
        <router-link :to="{ path: '/product/detail', query: { id: 102, name: '智能手机' } }">
          商品 102 (智能手机)
        </router-link>
      </li>
    </ul>
  </div>
</template>

路由配置 (router/index.js):

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import ProductDetail from '../views/ProductDetail.vue'
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/product/detail',
    name: 'ProductDetail',
    component: ProductDetail
  }
]
const router = createRouter({
  history: createWebHistory(),
  routes
})
export default router

目标组件 (ProductDetail.vue): 在目标组件中，我们可以通过 useRoute 组合式 API 来获取路由信息，特别是 query 对象。

<template>
  <div>
    <h2>商品详情页</h2>
    <p>商品ID: {{ route.query.id }}</p>
    <p>商品名称: {{ route.query.name }}</p>
  </div>
</template>
<script setup>
import { useRoute } from 'vue-router';
// 获取当前路由对象
const route = useRoute();
// 访问查询参数
// 如果参数不存在，访问 query.id 会返回 undefined
const productId = route.query.id;
</script>
<!-- 或者使用 Options API -->
<script>
export default {
  computed: {
    productId() {
      return this.$route.query.id;
    }
  }
}
</script>

生成的 URL: 点击第一个链接后，浏览器地址栏会变成： http://localhost:8080/product/detail?id=101&name=笔记本电脑

路径参数

路径参数将参数直接嵌入到 URL 路径中，这使得 URL 更简洁，也更符合 RESTful API 的风格。

准备工作：在路由配置中定义参数

在使用路径参数之前,必须在路由配置中使用 来定义占位符。

路由配置 (router/index.js):

import { createRouter, createWebHistory } from 'vue-router'
// ... 其他导入
const routes = [
  // ... 其他路由
  {
    // 使用 :id 作为路径参数的占位符
    path: '/product/:id', 
    name: 'ProductDetailWithParam',
    component: ProductDetail
  }
]
// ... 创建并导出 router

如何使用 <router-link> 传递路径参数

同样使用 to 属性绑定一个对象，但这次使用 params 属性。

语法：

<router-link :to="{ name: '路由名称', params: { 参数名: 值 } }">
  点击我
</router-link>

注意： 当使用 params 时，强烈推荐使用 name 而不是 path 来指定目标路由，因为如果使用 path，params 会被忽略，导致参数无法传递。

示例：

源组件 (Home.vue):

<template>
  <div>
    <h1>商品列表 (路径参数版)</h1>
    <ul>
      <!-- 使用路径参数传递商品ID -->
      <li>
        <router-link :to="{ name: 'ProductDetailWithParam', params: { id: 201 } }">
          商品 201
        </router-link>
      </li>
      <li>
        <router-link :to="{ name: 'ProductDetailWithParam', params: { id: 202 } }">
          商品 202
        </router-link>
      </li>
    </ul>
  </div>
</template>

目标组件 (ProductDetail.vue): 获取路径参数的方式与查询参数类似，只是从 params 对象中读取。

<template>
  <div>
    <h2>商品详情页 (路径参数版)</h2>
    <p>商品ID: {{ route.params.id }}</p>
  </div>
</template>
<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
// 路径参数是必需的，如果访问不存在的参数会返回 undefined
const productId = route.params.id;
</script>
<!-- Options API -->
<script>
export default {
  computed: {
    productId() {
      return this.$route.params.id;
    }
  }
}
</script>

生成的 URL: 点击第一个链接后，浏览器地址栏会变成： http://localhost:8080/product/201

总结与对比

最佳实践

• 对于标识性强的参数（如 ID、用户名），使用路径参数，它能让 URL 更简洁、更符合 RESTful 风格，并且对搜索引擎更友好。
• 对于非标识性的、可选的参数（如搜索关键词、页码、排序方式），使用查询参数，它们更灵活，且不会影响路由的核心匹配逻辑。

希望这个详细的解释能帮助你完全掌握 <router-link> 带参数的使用！