在 Nuxt.js 中创建 SPA

Question

我有一个导航栏（也许还有一个页脚），它应该在每个嵌套页面上都可见。所以基本上只是内容发生了变化。在 Vue.js 中，我将只使用 <router-view> 作为动态内容的占位符，并使用 <router-link> 来切换此内容。

现在在 Nuxt.js 我有以下目录结构。

pages/
--| calendar/
-----| index.vue
--| people/
-----| index.vue
--| index.vue

我的导航栏由两个<nuxt-link> 组成，例如<nuxt-link :to="/calendar"> (some content) </nuxt-link>。所以如果我点击这个链接，导航栏就会消失，只显示/pages/calendar/index.vue中的内容。 抱歉，我是 nuxt 的新手，但我认为可以像在 Vue.js 中一样创建 SPA。我什至将模式从通用更改为 spa，并且还使用了上面解释的 Vue.js 方法，但没有成功。

Answer 1

您可以通过添加 layouts/default.vue 文件来扩展主布局。它将用于所有没有指定布局的页面。确保在创建布局时添加组件以实际包含页面组件。

类似这样的：

<template>
  <div>
    <div>My blog navigation bar here</div>
    <Nuxt />
    <div>My footer is here</div>
  </div>
</template>

如果您需要在子子路由中使用它，您可以在 pages/index.vue 中使用 NUXT-CHILD 来获取子子嵌套页面...

<template>
  <div>
    <div>FIXED BANNER</div>
      <nuxt-child />
    <div>FIXED LIST OF ITEMS </div>
  </div>
</template>