Router Link如何正确携带参数？

<router-link> 携带参数主要有两种方式，分别对应 Vue Router 的两种“参数”概念：

1. 查询参数：类似 URL 中的 ?key=value 格式，多个参数用 & 连接，它不会影响路由的匹配路径。
2. 路径参数：嵌套在 URL 路径中，定义在路由配置的 path 中，用冒号 标记，它会直接影响路由的匹配。

下面我们通过详细的例子来分别说明。

场景设定

假设我们有以下两个组件：

• Home.vue：首页，包含指向详情页的链接。
• UserDetail.vue：用户详情页，用于显示用户信息。

路由配置 (router/index.js)

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import UserDetail from '../views/UserDetail.vue'
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    // 注意这里的 :id，这就是一个路径参数
    path: '/user/:id',
    name: 'UserDetail',
    component: UserDetail
  }
]
const router = createRouter({
  history: createWebHistory(),
  routes
})
export default router

携带查询参数

查询参数是附加在 URL 末尾的键值对，格式为 ?key=value&key2=value2，它非常适合用于筛选、排序、分页等非必需的、可选的参数。

语法

使用 v-bind（或简写 ）将一个对象绑定到 to 属性上，这个对象的 query 属性就是你要传递的查询参数。

<!-- 基础语法 -->
<router-link :to="{ path: '目标路径', query: { 参数名: '参数值' } }">链接文本</router-link>
<!-- 简写形式（推荐） -->
<router-link :to="{ name: '路由名称', query: { 参数名: '参数值' } }">链接文本</router-link>

为什么推荐使用 name 而不是 path？ 因为如果路由的 path 发生变化，你只需要修改 router/index.js 中的配置，而不需要去所有使用该路由的地方修改 path 字符串，代码更健壮。

示例

在 Home.vue 中，我们想链接到用户详情页，并传递用户的 id 和 source（来源）。

<!-- Home.vue -->
<template>
  <div>
    <h1>用户列表</h1>
    <ul>
      <li v-for="user in users" :key="user.id">
        <!-- 
          使用 name: 'UserDetail' 来链接
          传递 query 参数: id 和 source
          最终生成的 URL 类似: /user/123?source=home-page
        -->
        <router-link 
          :to="{ 
            name: 'UserDetail', 
            query: { 
              id: user.id, 
              source: 'home-page' 
            } 
          }"
        >
          查看 {{ user.name }} 的详情
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script setup>
const users = [
  { id: 123, name: '张三' },
  { id: 456, name: '李四' },
]
</script>

效果：

点击“查看 张三 的详情”链接后，浏览器地址栏会变成： http://your-domain.com/user/123?source=home-page

携带路径参数

路径参数是 URL 路径的一部分，定义在路由配置的 path 中（如 /user/:id 中的 id），它非常适合用于标识一个特定的资源，比如文章 ID、用户 ID 等。

语法

同样使用 v-bind（或 ）绑定一个对象到 to 属性，这个对象的 params 属性就是你要传递的路径参数。

<!-- 基础语法 -->
<router-link :to="{ path: '目标路径', params: { 参数名: '参数值' } }">链接文本</router-link>
<!-- 简写形式（推荐） -->
<router-link :to="{ name: '路由名称', params: { 参数名: '参数值' } }">链接文本</router-link>

重要提示：当使用 params 时，必须提供 name 而不能使用 path，因为 path 是静态的，而 params 是动态的，Vue Router 无法通过 path 推断出完整的动态 URL。

示例

同样在 Home.vue 中，我们想通过路径参数传递用户 ID。

<!-- Home.vue -->
<template>
  <div>
    <h1>用户列表</h1>
    <ul>
      <li v-for="user in users" :key="user.id">
        <!-- 
          使用 name: 'UserDetail' 来链接
          传递 params 参数: id
          最终生成的 URL 类似: /user/123
        -->
        <router-link 
          :to="{ 
            name: 'UserDetail', 
            params: { 
              id: user.id 
            } 
          }"
        >
          查看 {{ user.name }} 的详情
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script setup>
const users = [
  { id: 123, name: '张三' },
  { id: 456, name: '李四' },
]
</script>

效果：

点击“查看 张三 的详情”链接后，浏览器地址栏会变成： http://your-domain.com/user/123

如何在目标页面接收参数？

在目标页面（UserDetail.vue）中，我们可以通过 useRoute 组合式 API 来获取传递过来的参数。

useRoute() 会返回一个路由对象，包含了当前路由的所有信息，包括 params 和 query。

示例

在 UserDetail.vue 中接收并显示参数。

<!-- UserDetail.vue -->
<template>
  <div>
    <h1>用户详情页</h1>
    <p>正在加载 ID 为 {{ route.params.id }} 的用户信息...</p>
    <p>此用户来自: {{ route.query.source || '未知来源' }}</p>
    <button @click="goBack">返回</button>
  </div>
</template>
<script setup>
import { useRoute, useRouter } from 'vue-router'
// 1. 获取路由对象，用于读取参数
const route = useRoute()
// 2. 获取路由器对象，用于编程式导航（如返回）
const router = useRouter()
// 从 route.params 中获取路径参数
const userId = route.params.id
console.log('路径参数 ID:', userId) // 输出: "123" 或 "456"
// 从 route.query 中获取查询参数
const source = route.query.source
console.log('查询参数 source:', source) // 输出: "home-page" 或 undefined
// 返回上一页的函数
const goBack = () => {
  router.go(-1)
}
</script>

总结与对比

最佳实践

• 优先使用路径参数：当参数是用于定位一个特定资源时（如用户 ID、文章 ID），使用路径参数 /user/:id 更符合 RESTful 风格，且 URL 更简洁。
• 优先使用查询参数：当参数是可选的、用于改变页面展示状态（如排序、筛选条件）时，使用查询参数 ?sort=asc 更为合适。
• 使用 name 导航：在绝大多数情况下，使用命名路由 (name) 来进行导航比硬编码 path 更好，因为它使得路由配置和导航代码解耦，更具可维护性。

希望这个详细的解释能帮助你完全理解 Vue Router 中 <router-link> 如何携带参数！