API <nuxt>组件教程

发布时间：2023-04-14 14:18:09 所属栏目：教程来源：

导读：<nuxt> 组件只适用于在布局中显示页面组件（即非布局内容）。

例子 (layouts/default.vue)：

<template>
<div>
<div>页头</div>
<nuxt/>
<div>页脚</div>
</div>
</template>
Props:

<nuxt> 组件只适用于在布局中显示页面组件（即非布局内容）。

例子 (layouts/default.vue)：

<template>
<div>
<div>页头</div>
<nuxt/>
<div>页脚</div>
</div>
</template>
Props:
nuxtChildKey: string
此prop将设置为<router-view />，可用于在动态页面和不同路由内进行过渡。

默认: $route.path

有三种方式可以处理 <router-view /> 内部属性的 key。

1.nuxtChildKey 属性：

<template>
<div>
<nuxt :nuxt-child-key="someKey"/>
</div>
</template>
2.页面组件中的key选项：string 或 function

export default {
key (route) {
return route.fullPath
}
}
3.页面组件中的watchQuery选项：boolean 或 string []

watchQuery选项中指定的查询会被用于构建key。如果watchQuery为true，则默认使用fullPath。

name: string (Nuxt v2.4.0 新增)
此 prop 将提供给<router-view />使用，用于渲染命名视图。

默认: default

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!