在Vue开发中，经常需要根据不同的情况动态地为当前地址添加参数。这些参数可以用于传递数据，控制组件的渲染，或者实现更复杂的路由逻辑。本文将详细介绍如何在Vue中为当前地址添加动态参数，包括使用动态路由和URL查询参数两种方式。

1. 动态路由传参

动态路由是Vue Router提供的一种功能，允许你将参数作为路径的一部分进行传递。这种方式适用于当你的路径需要根据参数变化时。

1.1 配置动态路由

首先，你需要在路由配置中定义动态参数。动态参数的标识是冒号（:）加上参数名。

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

在上面的例子中，:id 是一个动态参数，它将匹配任何以 /user/ 开头的路径，并将参数值传递给 User 组件。

1.2 使用动态参数

在组件内部，你可以通过 this.$route.params 访问动态参数。

export default {
  name: 'User',
  computed: {
    userId() {
      return this.$route.params.id;
    }
  }
}

1.3 重定向到带有动态参数的路由

你可以使用 router.push 或 router.replace 方法来重定向到带有动态参数的路由。

this.$router.push({ name: 'user', params: { id: 123 } });

2. URL查询参数传参

除了动态路由，你还可以在URL中使用查询参数来传递数据。这种方式类似于传统的URL查询字符串。

2.1 添加查询参数

你可以通过在URL中添加 ? 符号后跟参数名和值来添加查询参数。

this.$router.push({ query: { userId: 123 } });

或者使用 router-link 组件：

<router-link :to="{ query: { userId: 123 } }">Go to User</router-link>

2.2 获取查询参数

在组件内部，你可以通过 this.$route.query 访问查询参数。

export default {
  name: 'User',
  computed: {
    userId() {
      return this.$route.query.userId;
    }
  }
}

3. 总结

通过以上两种方式，你可以在Vue中轻松地为当前地址添加动态参数。动态路由适用于路径需要根据参数变化的情况，而URL查询参数则适用于不需要改变路径结构的情况。选择哪种方式取决于你的具体需求和场景。