nuxt3传参

### Nuxt3 中的参数传递方法 在 Nuxt 3 中，参数传递是一个常见的需求，尤其是在页面与布局、动态路由以及插件之间。以下是详细的实现方法和示例。 #### 页面与布局之间的参数传递 Nuxt 3 提供了 `definePageMeta` 和 `useAttrs` 方法来实现页面与布局之间的参数传递。通过这些工具，可以在页面中定义元信息，并将数据传递给布局组件。 ```javascript // pages/example.vue <script setup> definePageMeta({ layout: 'custom', // 使用自定义布局 }); const customParam = 'Hello from Page'; </script> <template> <div> <p>This is the example page.</p> </div> </template> ``` 在布局组件中，可以通过 `useAttrs` 获取页面传递的参数： ```javascript // layouts/custom.vue <script setup> import { useAttrs } from 'vue'; const attrs = useAttrs(); </script> <template> <div> <h1>Custom Layout</h1> <p>{{ attrs.customParam }}</p> <!-- 接收页面传递的参数 --> <slot /> </div> </template> ``` #### 动态路由参数传递 Nuxt 3 支持通过 URL 路径传递参数。可以使用 `defineRouteConfig` 或 `extendRoutes` 来配置动态路由。以下是一个示例： ```javascript // pages/_slug.vue <script setup> const route = useRoute(); console.log(route.params.slug); // 获取动态路由参数 </script> <template> <div> <p>Slug: {{ route.params.slug }}</p> </div> </template> ``` 如果需要传递多个参数，可以通过路径分隔符 `/` 实现： ```javascript // pages/_category/_id.vue <script setup> const route = useRoute(); console.log(route.params.category); // 获取第一个参数 console.log(route.params.id); // 获取第二个参数 </script> <template> <div> <p>Category: {{ route.params.category }}</p> <p>ID: {{ route.params.id }}</p> </div> </template> ``` #### 插件中的参数传递 在 Nuxt 3 中，插件可以用于全局注册方法或属性。以下是一个简单的插件示例，展示如何在应用中共享方法或数据[^3]。 ```javascript // plugins/my-plugin.js export default defineNuxtPlugin((nuxtApp) => { nuxtApp.provide('greet', (name) => { return `Hello, ${name}`; }); }); ``` 在页面中调用插件提供的方法： ```javascript // pages/index.vue <script setup> const { $greet } = useNuxtApp(); console.log($greet('Nuxt3')); // 输出 "Hello, Nuxt3" </script> <template> <div> <p>{{ $greet('World') }}</p> </div> </template> ``` #### 组件内方法的定义与调用 在 Nuxt 3 中，可以通过 `<script setup>` 定义组件内的方法，并在模板中调用它们[^4]。 ```javascript // components/MyComponent.vue <script setup> const sayHello = () => { alert('Hello from component'); }; </script> <template> <button @click="sayHello">Click Me</button> </template> ``` --- ### 总结 以上内容详细介绍了 Nuxt 3 中参数传递的多种方式，包括页面与布局之间的参数传递、动态路由参数传递、插件中的参数共享以及组件内方法的定义与调用。每种方法都有其适用场景，开发者可以根据具体需求选择合适的方式。