Nuxt.js - 如何有单独的布局?
[英] Nuxt.js - How to have separate layout?
本文介绍了Nuxt.js - 如何有单独的布局?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在我的默认布局中，每个页面都有页眉和页脚.但是在 error pages 我需要一个没有页眉和页脚的完整页面.所以我做了另一个布局，我在 export default 部分调用它.但它仍然有页眉和页脚.
default.vue
<div><app-header></app-header><nuxt/><app-footer></app-footer>
<脚本>从'~/components/Header.vue'导入头文件从'~/components/Footer.vue'导入页脚导出默认{组件: {'app-header':标题，'app-footer':页脚，}}
error.vue
<div class="容器"><h1 v-if="error.statusCode === 404">页面未找到</h1><h1 v-else>发生错误</h1><nuxt-link to="/">主页</nuxt-link>
<脚本>导出默认{道具:['错误']，layout: 'fullpage'//可以为错误页面设置自定义布局}
fullpage.vue
<div><nuxt/>
我错在哪里?
解决方案
ON 你的 Nuxt 项目文件夹 layouts，创建一个名为 error.vue 的文件，它会自动检测所有 404 错误，即未找到页面.
<块引用>错误.vue
<div class="error-page"><h1>糟糕，出了点问题！</h1><p>返回<a href="/">安全</a>!</p>
<样式范围>.错误页面{文本对齐:居中；}.error-page a {文字装饰:无；红色;}.error-page a:hover,.error-page a:active {颜色:鲑鱼；}</风格>
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?
解决方案
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>
这篇关于Nuxt.js - 如何有单独的布局?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
