vue3 routr-link 及参数

Vue 3 的路由使用 Vue Router，而路由链接组件是 `router-link`。使用 `router-link` 可以方便地生成跳转链接，同时也支持传递参数。

以下是一个简单的例子，假设我们有一个名为 `Home` 的页面，我们要在另一个页面中跳转到它，并传递一个名为 `id` 的参数：

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

在这个例子中，我们使用了 Vue 的绑定语法 `:to`，将一个对象传递给 `router-link` 的 `to` 属性。这个对象包含两个属性：`name` 表示要跳转到的页面的名称，`params` 表示要传递的参数。在这里，我们将 `name` 设置为 `Home`，表示要跳转到名为 `Home` 的页面，将 `params` 设置为 `{ id: 123 }`，表示要传递一个名为 `id`，值为 `123` 的参数。

在接收参数的页面中，我们可以使用 `$route.params` 来获取传递过来的参数。例如，在 `Home` 页面中，我们可以这样获取 `id` 参数：

export default {
  mounted() {
    console.log(this.$route.params.id) // 输出：123
  }
}

以上就是关于 Vue 3 路由链接组件 `router-link` 及参数的简单介绍。

相关问题

vue3 routr-link query传参两种方式

当使用 `vue-router` 中的 `<router-link>` 组件时，可以通过 `query` 属性将参数传递给目标路由。

第一种方式是直接在 `to` 属性中添加一个对象，例如：

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

这样就会将 `{ id: '123' }` 这个对象作为查询参数传递给目标路由。

第二种方式是使用 `v-bind` 指令将一个包含参数的变量绑定到 `to` 属性上，例如：

<router-link :to="{ path: '/foo', query: queryParams }">Go to Foo</router-link>

这里的 `queryParams` 可以是一个包含参数的对象，也可以是一个计算属性或者方法返回的对象。