router link带参数如何传递与获取？

<router-link> 带参数主要有两种方式：

1. 查询参数 (Query Parameters)：类似 URL 中的 ?key=value 格式。
2. 路径参数 (Path Parameters)：类似 URL 中的 /users/:id 中的 id 部分。

下面我们通过一个完整的例子来详细说明。

准备工作：路由配置

我们需要在 router/index.js (或你的路由配置文件) 中定义好路由，我们会同时设置一个带路径参数和查询参数的路由。

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import UserDetail from '../views/UserDetail.vue'
import UserProfile from '../views/UserProfile.vue'
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    // 定义了一个路径参数 :id
    // 当访问 /user/123 时，123 就会被匹配为 id 参数
    path: '/user/:id',
    name: 'UserDetail',
    component: UserDetail
  },
  {
    // 这个路由可以同时接收路径参数 userId 和查询参数 tab
    // 示例 URL: /profile/123?tab=settings
    path: '/profile/:userId',
    name: 'UserProfile',
    component: UserProfile
  }
]
const router = createRouter({
  history: createWebHistory(),
  routes
})
export default router

路径参数

路径参数是 URL 的一部分，通常用于标识一个特定的资源，比如文章 ID、用户 ID 等。

在模板中使用 <router-link>

使用 to 属性来指定目标路由，为了传递路径参数，你需要提供一个对象，params 属性包含参数名和值的键值对。

示例： 跳转到用户详情页，并传递用户 ID 123。

<template>
  <div>
    <h1>首页</h1>
    <p>这是主页内容。</p>
    <!-- 使用对象语法传递路径参数 -->
    <!-- 
      :to 的值是一个对象，Vue Router 会自动将其转换为 URL 字符串
      params: { id: '123' } 会被转换成 /user/123
    -->
    <router-link :to="{ name: 'UserDetail', params: { id: '123' }}">
      查看用户 123 的详情
    </router-link>
    <!-- 也可以使用 path，但推荐使用 name，因为更健壮 -->
    <!-- <router-link :to="{ path: '/user/456' }">查看用户 456</router-link> -->
  </div>
</template>

关键点：

• 使用 to 绑定一个对象。
• 对象中包含 name 或 path。
• 使用 name 是最佳实践，因为如果路由的 path 发生变化，你只需要修改路由配置文件，而不需要修改所有 <router-link>。
• 参数放在 params 对象里。

在目标组件中获取参数

在目标路由组件（这里是 UserDetail.vue）中，你可以通过 useRoute 这个 Composition API 来获取当前路由的信息，包括参数。

<!-- src/views/UserDetail.vue -->
<template>
  <div>
    <h2>用户详情页</h2>
    <p>正在查看 ID 为 <strong>{{ userId }}</strong> 的用户。</p>
  </div>
</template>
<script setup>
import { useRoute } from 'vue-router'
// 1. 获取 route 对象
const route = useRoute()
// 2. 从 route.params 中获取路径参数
// 路由配置中的 :id 对应这里的 route.params.id
const userId = route.params.id
</script>

查询参数

查询参数不是 URL 的必要部分，通常用于筛选、排序、分页等可选信息，格式为 ?key=value&key2=value2。

在模板中使用 <router-link>

同样使用 to 属性，但参数需要放在 query 对象中。

示例： 跳转到个人资料页，传递用户 ID 789 和激活的标签页 settings。

<template>
  <div>
    <h1>首页</h1>
    <p>这是主页内容。</p>
    <!-- 使用对象语法传递查询参数 -->
    <!-- 
      query: { userId: '789', tab: 'settings' } 会被转换成 /profile/789?tab=settings
      注意：路径参数 /profile/:userId 中的 userId 也要在 params 中提供
    -->
    <router-link 
      :to="{ 
        name: 'UserProfile', 
        params: { userId: '789' }, 
        query: { tab: 'settings' } 
      }"
    >
      查看 用户 789 的资料 (设置标签页)
    </router-link>
    <br /><br />
    <!-- 另一个例子，只传递查询参数 -->
    <router-link :to="{ name: 'Home', query: { from: 'sidebar' } }">
      从侧边栏返回首页
    </router-link>
  </div>
</template>

关键点：

• 参数放在 query 对象里。
• query 参数是可选的，可以没有。
• query 参数可以和 params 参数同时使用。

在目标组件中获取参数

同样使用 useRoute，但从 route.query 中获取。

<!-- src/views/UserProfile.vue -->
<template>
  <div>
    <h2>个人资料页</h2>
    <p>正在查看 ID 为 <strong>{{ profileUserId }}</strong> 的用户资料。</p>
    <p>当前激活的标签页是: <strong>{{ activeTab }}</strong></p>
  </div>
</template>
<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
// 从 route.params 中获取路径参数
const profileUserId = route.params.userId
// 从 route.query 中获取查询参数
const activeTab = route.query.tab || 'home' // 如果没有 tab 参数，默认为 'home'
</script>

总结与对比

最佳实践

1. 优先使用 name 而不是 path：当路由的 path 可能发生变化时，使用 name 可以让你无需修改所有相关的 <router-link>，代码更健壮。
2. 区分使用场景：
   • 如果参数是用来定位一个具体资源的，用路径参数。
   • 如果参数是可选的、用于过滤或状态记录的，用查询参数。
3. 代码可读性：在 <router-link> 中使用对象语法虽然代码稍长，但非常清晰，易于维护。

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