使用 nuxt-属性-decorator 时如何设置自定义布局？

Question

夏天

我想为特定页面设置不同的页眉组件。

layout
  ├ default.vue // <- common header
  └ custom.vue // <- special header for spesific page

我想知道在使用nuxt-属性-decorator时如何设置不同的布局。
https://github.com/nuxt-community/nuxt-property-decorator

"nuxt": "^2.15.7",
"nuxt-property-decorator": "^2.9.1",

一些代码

案例1

<script lang="ts">
import { Component, Vue,} from 'nuxt-property-decorator'

@Component
export default class Component extends Vue {
  layout () { // <- error on layout
    return 'custom'
  }
}

它returns以下错误

Duplicate function implementation.Vetur(2393)

案例二

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'

@Component({
  layout: 'custom' // <- error on layout: 'custom'
})
export default class Component extends Vue {
}

它returns以下错误

No overload matches this call.
  Overload 1 of 2, '(options: ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<DefaultProps>, DefaultProps> & ThisType<...>): <VC extends VueClass<...>>(target: VC) => VC', gave the following error.
    Argument of type '{ layout: string; }' is not assignable to parameter of type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<DefaultProps>, DefaultProps> & ThisType<...>'.
      Object literal may only specify known properties, and 'layout' does not exist in type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<DefaultProps>, DefaultProps> & ThisType<...>'.
  Overload 2 of 2, '(target: VueClass<Vue>): VueClass<Vue>', gave the following error.
    Argument of type '{ layout: string; }' is not assignable to parameter of type 'VueClass<Vue>'.
      Object literal may only specify known properties, and 'layout' does not exist in type 'VueClass<Vue>'.Vetur(2769)

Answer 1

我发现需要在 pages 上设置布局，而不是 components。

├ components
│  └ index.vue // <- not here
└ pages 
   └ index.vue // <- here

它适用于 pages/index.vue

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'

@Component({
  layout: 'custom',
})
export default class Page extends Vue {

}
</script>

使用 nuxt-属性-decorator 时如何设置自定义布局？

How to set custom layout when using nuxt-property-decorator?

javascript

typescript

vue.js

vuejs2

nuxt.js

夏天

一些代码

案例1

案例二