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` 可以是一个包含参数的对象，也可以是一个计算属性或者方法返回的对象。

vue3 router-link 的使用'

vue3中的router-link是Vue Router提供的组件，用于在应用程序中创建可点击的链接。它可以帮助我们在不刷新页面的情况下切换路由。

在Vue3中，使用router-link的步骤如下：

1. 首先，确保已经安装并配置了Vue Router。
2. 在需要使用router-link的组件中，导入router-link组件：

import { RouterLink } from 'vue-router'

3. 在模板中使用router-link组件，并设置to属性为目标路由的路径：

<router-link to="/home">Home</router-link>

4. 可以通过设置active-class属性来自定义激活状态的类名：

<router-link to="/home" active-class="active">Home</router-link>

5. 还可以通过设置exact属性来指定路由是否需要精确匹配：

<router-link to="/home" exact>Home</router-link>

这样就可以在Vue3中使用router-link来创建路由链接了。希望对你有帮助！如果有更多问题，请继续提问。