Nuxt默认模板、默认布局和自定义错误页面的实现

时间：2021-05-26

一、默认模板和默认布局

通常用于一些有固定格式的网站 比如一些网站的头部和底部都是一样的 此时即可使用默认模板

默认模板

在项目的根目录下创建一个名为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> <h1 v-if="error.statusCode === 404">页面不存在</h1> <h1 v-else>页面发生了一个错误</h1> <nuxt-link to="/">返回首页</nuxt-link> </div></template><script>export default { props: ["error"], layout: "blog" // 可以为错误页面指定自定义的布局}</script>

到此这篇关于Nuxt默认模板、默认布局和自定义错误页面的文章就介绍到这了,更多相关Nuxt默认模板、默认布局和自定义错误页面内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章