Nuxt.js - How to have separate layout?

问题

In my default layout I have header and footer for every page. But in error pages I need a full page without header and footer. So I made another layout and I'm calling it in the export default section. But it's still have header and footer.

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>

Where I'm wrong?

回答1:

You can do like this

    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' 
   }

Maybe its help Thanks !

回答2:

ON Your Nuxt Project Folder called layouts, Create a file named error.vue and it will automatically detect all your 404 error which is page not found.

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>

来源：https://stackoverflow.com/questions/54512125/nuxt-js-how-to-have-separate-layout

标签

vuejs2

nuxt.js