时间戳

首页 > 解决方案 > 在 Nuxt.js 中创建 SPA

vue.js - 在 Nuxt.js 中创建 SPA

问题描述

我有一个导航栏（也许还有一个页脚），它应该在每个嵌套页面上都可见。所以基本上只是内容发生了变化。在 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 方法，但没有成功。

标签： vue.jsnuxt.jssingle-page-application

解决方案

您可以通过添加 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>

推荐阅读