Nuxt.js-如何使用单独的布局？

Posted 2021-04-12

在我的默认布局中，每个页面都有页眉和页脚。但是在error pages中，我需要一个没有页眉和页脚的整页。因此，我进行了另一种布局，并在export default部分中对其进行了调用。但它仍然具有页眉和页脚。

default.vue

<template>
  <div>
    <app-header></app-header>
    <nuxt />
    <app-footer></app-footer>
  </div>
</template>

<script>
import Header from '~/components/Header.vue'
import Footer from '~/components/Footer.vue'
export default {
    components: {
    'app-header': Header,
    'app-footer': Footer,
    }
}
</script>

error.vue

<template>
  <div class="container">
    <h1 v-if="error.statusCode === 404">Page not found</h1>
    <h1 v-else>An error occurred</h1>
    <nuxt-link to="/">Home page</nuxt-link>
  </div>
</template>

<script>
export default {
  props: ['error'],
  layout: 'fullpage' // you can set a custom layout for the error page
}
</script>

fullpage.vue

<template>
  <div>
    <nuxt />
  </div>
</template>

我错了？

答案

您可以这样做

    1 - create a layouterror.vue file inside layouts folder (Put nothing inside just the basic code).

    <template>
      <div>
      </div>
    </template>
    <script>
      export default {}
    </script>
    <style>
    </style>

    2 - create a error.vue file inside layouts folder.
    3 - and pass your error file a layout like this =>

   export default {
    layout: 'layouterror' 
   }

也许有帮助谢谢！

另一答案

打开您的名为layouts的Nuxt项目文件夹，创建一个名为error.vue的文件，它将自动检测到所有未找到的404错误”。

error.vue

<template>
  <div class="error-page">
    <h1>Oops, something went wrong!</h1>
    <p>Back to <a href="/">safety</a>!</p>
  </div>
</template>

<style scoped>
.error-page {
  text-align: center;
}

.error-page a {
  text-decoration: none;
  color: red;
}

.error-page a:hover,
.error-page a:active {
  color: salmon;
}
</style>