Question

我开始学习Nuxt.js，我喜欢Nuxt.js！

但是我遇到了问题：

我想为我的应用程序的所有页面创建页眉和页脚布局（对于 pug ，模拟为extends layout）。

我发现了以下方法（nuxt.config.js）：

router: {
        extendRoutes(routes, resolve) {
            routes.push({
                name: 'custom',
                path: '*',
                component: resolve(__dirname, 'layouts/header.vue')
            })
        }
    },

但这对我来说不合适。：（

我找到了文档（click me）：

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

我想要设置选项，其中每个页面都会加载我的模式：

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ HEADER}}
    {{ APP }}
    {{ FOOTER}}
  </body>
</html>

是否可以在Nuxt.js中做类似的事情？

Answer 1

只需要在布局目录下准备布局

并为页眉和页脚准备2个组件

因此，布局模板如下所示

<template>
<header_component>
</header_component>
</Nuxt>
<footer_component>
</footer_component>
</template>

如何设置默认的页眉和页脚Nuxt.js？

1 个答案: