返回介绍

开场白

开始使用

API

配置

部署

其他

API: <nuxt> 组件

发布于 2019-12-01 05:33:25 字数 1450 浏览 1077 评论 0 收藏 0

该组件只适用于在布局中显示页面组件(即非布局内容)。

例子 (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>
  1. 页面组件中的key选项:stringfunction
export default {
  key (route) {
    return route.fullPath
  }
}
  1. 页面组件中的watchQuery选项:booleanstring []

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

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

查看例子请点击: 命名视图例子.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文