Antdv Router Link如何实现动态路由跳转并传递参数？

Question

在使用Antdv的Router Link实现动态路由跳转并传递参数时，常见的问题是如何正确传递和接收动态参数。例如，在设置``标签时，开发者可能不清楚如何通过`:to`属性动态绑定路径和参数。如果直接在`:to`中拼接字符串，可能导致路由解析失败或参数丢失。此外，当使用`params`传递参数时，若未正确配置动态路由路径（如`/user/:id`），也可能导致参数无法被捕获。 问题描述： 如何利用Antdv的``组件实现带参数的动态路由跳转？如果需要传递`query`或`params`类型的参数，具体应如何配置路由规则和``属性？ 这需要明确`props`、`:to`对象写法及路由模式的区别。

Answer 1

1. 问题背景与常见误区

在使用Antdv的<router-link>组件时，开发者经常遇到动态路由跳转参数传递的问题。例如，直接通过字符串拼接路径可能导致路由解析失败或参数丢失。

• 误区一： 直接在:to中拼接字符串，未正确区分params和query。
• 误区二： 配置路由规则时未定义动态路径（如/user/:id），导致params无法被捕获。

因此，理解:to对象写法、路由模式以及如何配置路由规则是解决问题的关键。

2. 路由参数类型及配置方法

Vue Router支持两种主要的参数传递方式：params和query。以下是它们的区别及配置方法：

参数类型	特点	适用场景
params	路径的一部分，不会出现在URL查询字符串中。	需要隐藏参数或保持URL简洁时。
query	以查询字符串形式附加在URL后。	需要分享链接或书签功能时。

例如，若需跳转到/user/123，应确保路由规则中定义了/user/:id。

3. 使用:to对象实现动态跳转

:to属性可以接受一个字符串或对象。推荐使用对象写法以提高灵活性。

<router-link :to="{ name: 'User', params: { id: 123 } }">Go to User</router-link>

上述代码中，name对应路由名称，params为动态参数。若使用query，可改为：

<router-link :to="{ path: '/user', query: { id: 123 } }">Go to User</router-link>

注意：当使用params时，必须通过路由名称（name）进行跳转，而非路径（path）。

4. 动态路由配置与捕获参数

以下是路由规则的配置示例：

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

在目标组件中，可通过$route访问参数：

export default {
    mounted() {
        console.log(this.$route.params.id); // 获取params
        console.log(this.$route.query.id);  // 获取query
    }
}

如果未正确配置动态路径，params将无法被捕获。

5. 流程图：参数传递步骤

以下是参数传递的流程：

graph TD
    A[定义路由规则] --> B[设置动态路径]
    B --> C[创建<router-link>]
    C --> D[配置:to对象]
    D --> E[跳转至目标页面]
    E --> F[捕获参数并使用]

此流程明确了从路由配置到参数捕获的完整过程。