Nuxt默认模板、默认布局和自定义错误页面的实现
更新时间：2020年05月11日 08:38:08 作者：Piconjo_Official
这篇文章主要介绍了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>
<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默认模板、默认布局和自定义错误页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
uni-app应用配置manifest.json最全最详细配置
这篇文章主要给大家介绍了关于uni-app应用配置manifest.json最全最详细配置,manifest.json文件是UniApp开发中用来配置应用信息的重要文件,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-01-01
在有些时候我们无法控制乱码的出现, 比如发送邮件的时候有些邮件显示乱码, 比如Ajax返回数据总是乱码. 怎么办?2009-11-11
这篇文章介绍了js将json格式内容转换成对象的方法，有需要的朋友可以参考一下2013-11-11
js中forEach，for in，for of循环的用法示例小结
这篇文章主要介绍了js中forEach，for in，for of循环的用法,结合实例形式总结分析了js中forEach，for in，for of循环相关使用技巧与操作注意事项,需要的朋友可以参考下2020-03-03
video控件是微信小程序提供的系统组件之一,用于实现播放视频的功能,这篇文章主要给大家介绍了关于微信小程序之video组件视频播放的相关资料,需要的朋友可以参考下2022-04-04
传统的javascript中只有对象,没有类的概念,下面这篇文章主要给大家介绍了关于ES6 class类实现继承的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-10-10
这篇文章主要为大家详细介绍了用JS编写选项卡效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了微信小程序 如何获取网络状态,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-07-07
用YUI做了个标签浏览效果...2007-02-02
这篇文章主要介绍了js+css绘制颜色动态变化的圈中圈效果,涉及JavaScript结合时间函数动态操作页面元素样式的相关技巧,需要的朋友可以参考下2016-01-01
最新评论