router-link 携带参数跳转

在Vue中，你可以使用`<router-link>`组件来进行路由跳转并携带参数。以下是一个示例：

首先，在定义路由时，你可以在路由路径中使用动态参数，例如：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      name: 'User',
      component: UserComponent
    }
  ]
})

在上述示例中，`:id` 表示一个动态参数，可以在跳转时传入不同的值。

接下来，在模板中，你可以使用`<router-link>`组件来创建带参数的跳转链接。示例如下：

<template>
  <div>
    <router-link :to="{ name: 'User', params: { id: userId }}">跳转到用户页面</router-link>
  </div>
</template>

在上述示例中，使用`:to`属性来绑定一个对象，其中`name`属性指定路由的名称为`User`，`params`属性指定传递的参数为一个对象，其中`id`为参数名称，`userId`为要传递的参数值。

当点击该链接时，将跳转到名为`User`的路由，并携带参数。

在目标组件中，你可以通过`$route.params`来获取传递的参数。示例如下：

// 在目标组件中
mounted() {
  const userId = this.$route.params.id;
  // 使用 userId 进行相应的操作
}

在上述示例中，`mounted` 钩子函数中通过`this.$route.params.id`获取了传递的参数值。

希望这个例子能帮助你理解如何使用`<router-link>`携带参数进行路由跳转！