nuxt-link跳转传参
时间: 2023-09-05 12:13:31 浏览: 170
Nuxt框架的路由跳转及传参
在 Nuxt 中使用 `nuxt-link` 跳转传参可以通过以下两种方式实现:
1. 使用 `$route` 对象
在组件中使用 `$route` 对象获取当前路由信息,然后通过 `query` 或 `params` 对象来传递参数。
例如:
```html
<template>
<div>
<nuxt-link :to="{ name: 'my-page', query: { id: 123, name: 'test' } }">跳转到我的页面</nuxt-link>
</div>
</template>
```
在目标页面中可以通过 `$route.query` 获取传递的参数。
例如:
```js
export default {
mounted() {
console.log(this.$route.query.id) // 123
console.log(this.$route.query.name) // test
}
}
```
2. 使用动态路由
在路由配置中使用动态路由来传递参数。
例如:
```js
// 路由配置
{
path: '/my-page/:id',
name: 'my-page',
component: MyPage
}
```
在组件中使用 `params` 对象来传递参数。
例如:
```html
<template>
<div>
<nuxt-link :to="{ name: 'my-page', params: { id: 123 } }">跳转到我的页面</nuxt-link>
</div>
</template>
```
在目标页面中可以通过 `$route.params` 获取传递的参数。
例如:
```js
export default {
mounted() {
console.log(this.$route.params.id) // 123
}
}
```
阅读全文