Nuxt.js <nuxt> 组件
2020-02-13 17:31 更新
<nuxt> 组件
该组件只适用于在布局中显示页面组件(即非布局内容)。
例子 (layouts/default.vue):
<template>
<div>
<div>页头</div>
<nuxt/>
<div>页脚</div>
</div>
</template>
可以看下这个实际的布局示例。
Props:
- nuxtChildKey: string此prop将设置为<router-view />,可用于在动态页面和不同路由内进行过渡。默认: $route.path
有三种方式可以处理 <router-view /> 内部属性的 key。
- nuxtChildKey 属性:
<template>
<div>
<nuxt :nuxt-child-key="someKey"/>
</div>
</template>
- 页面组件中的key选项:string 或 function
export default {
key (route) {
return route.fullPath
}
}
- 页面组件中的watchQuery选项:boolean 或 string []
watchQuery选项中指定的查询会被用于构建key。如果watchQuery为true,则默认使用fullPath。
- name: string (Nuxt v2.4.0 新增)此 prop 将提供给<router-view />使用,用于渲染命名视图。默认: default
查看例子请点击: 命名视图例子.
以上内容是否对您有帮助:
更多建议: