小编这次要给大家分享的是Nuxt如何实现默认模板、默认布局和自定义错误页面，文章内容丰富，感兴趣的小伙伴可以来了解一下，希望大家阅读完这篇文章之后能够有所收获。
一、默认模板和默认布局
通常用于一些有固定格式的网站 比如一些网站的头部和底部都是一样的 此时即可使用默认模板
默认模板
在项目的根目录下创建一个名为app.html的文件 Nuxt即可自动将其识别为默认模板：
用法和字符串拼接有点类似 可将{{HEAD}}视为头部内容 将{{APP}}视为页面主体内容
(HEAD和APP都需大写)
<!DOCTYPE html>
<html lang="en">
<head>
{{HEAD}}
</head>
<body>
<p>测试1</p>
{{APP}}
<p>测试2</p>
</body>
</html>重启服务器 即可显示效果
同样 删除默认模板也需要重启服务器才可生效
默认布局
默认布局和默认模板的区别是 默认布局只能修改<template>标签内的布局 而默认模板能修改整个页面
在layouts/default.vue里设置默认布局：
<template> <div> <p>测试1</p> <nuxt /> <p>测试2</p> </div> </template>
二、自定义错误页面
在layouts/error.vue里定义错误页面：
当进入错误页面默认会传入一个error对象 用props接收 用v-if和v-else进行状态码的判断
<template>
<div>
<h2 v-if="error.statusCode === 404">页面不存在</h2>
<h2 v-else>页面发生了一个错误</h2>
<nuxt-link to="/">返回首页</nuxt-link>
</div>
</template>
<script>
export default {
props: ["error"],
layout: "blog" // 可以为错误页面指定自定义的布局
}
</script>看完这篇关于Nuxt如何实现默认模板、默认布局和自定义错误页面的文章，如果觉得文章内容写得不错的话，可以把它分享出去给更多人看到。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
