codecamp

Nuxt.js <nuxt> 组件

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

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

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

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


Nuxt.js watchQuery 属性
Nuxt.js <nuxt-child> 组件
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }