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


Posted in Javascript onMay 11, 2020

一、默认模板和默认布局

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

默认模板

在项目的根目录下创建一个名为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默认模板、默认布局和自定义错误页面内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
为jquery的ajaxfileupload增加附加参数的方法
Mar 04 Javascript
用JavaScript实现使用鼠标画线的示例代码
Aug 19 Javascript
javascript中setTimeout使用指南
Jul 26 Javascript
BootStrap文件上传样式超好看【持续更新】
May 10 Javascript
Javascript将JSON日期格式化
Aug 23 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
Dec 13 Javascript
jQuery插件版本冲突的处理方法分析
Jan 16 Javascript
微信小程序 下拉菜单的实现
Apr 06 Javascript
Vue.js 2.0学习教程之从基础到组件详解
Apr 24 Javascript
vue-cli + sass 的正确打开方式图文详解
Oct 27 Javascript
Node.js 的 GC 机制详解
Jun 03 Javascript
vue中实现高德定位功能
Dec 03 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
May 10 #Javascript
vue总线机制(bus)知识点详解
May 10 #Javascript
vue路由跳转传递参数的方式总结
May 10 #Javascript
javascript单张多张图无缝滚动实例代码
May 10 #Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
May 10 #Javascript
js实现文章目录索引导航(table of content)
May 10 #Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
May 10 #Javascript
You might like
收音机发烧友应当熟知的100条知识
2021/03/02 无线电
php实现字符串首字母转换成大写的方法
2015/03/17 PHP
PHP实现的文件浏览器功能简单示例
2019/09/12 PHP
详解php反序列化
2020/06/10 PHP
让textarea控件的滚动条怎是位与最下方
2007/04/20 Javascript
用JavaScript实现单继承和多继承的简单方法
2009/03/29 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
2013/04/23 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
遍历DOM对象内的元素属性示例代码
2014/02/08 Javascript
分享一个常用的javascript静态类
2014/12/31 Javascript
简单快速的实现js计算器功能
2017/08/17 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
2017/10/31 Javascript
AngularJS实现的自定义过滤器简单示例
2019/02/02 Javascript
Javascript的this详解
2019/03/23 Javascript
详解微信小程序-canvas绘制文字实现自动换行
2019/04/26 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
2019/10/30 Javascript
JS函数进阶之prototy用法实例分析
2020/01/15 Javascript
python遍历类中所有成员的方法
2015/03/18 Python
python计算对角线有理函数插值的方法
2015/05/07 Python
Python实现Linux中的du命令
2017/06/12 Python
python中文分词,使用结巴分词对python进行分词(实例讲解)
2017/11/14 Python
python Flask实现restful api service
2017/12/04 Python
Windows下将Python文件打包成.EXE可执行文件的方法
2018/08/03 Python
浅谈pycharm导入pandas包遇到的问题及解决
2020/06/01 Python
Win10环境中如何实现python2和python3并存
2020/07/20 Python
HTML5不支持标签和新增标签详解
2016/06/27 HTML / CSS
Stella McCartney官网:成衣、包袋、香水、内衣、童装及Adidas系列
2018/12/20 全球购物
药学专业大学生自荐信
2013/09/28 职场文书
计算机专业毕业生的自我评价
2013/11/18 职场文书
仓库主管的岗位职责
2013/12/04 职场文书
自动化毕业生专业自荐书范文
2014/02/04 职场文书
浅谈自定义校验注解ConstraintValidator
2021/06/30 Java/Android
Elasticsearch 聚合查询和排序
2022/04/19 Python
HTML5之高度塌陷问题的解决
2022/06/01 HTML / CSS
CSS使用Flex和Grid布局实现3D骰子
2022/08/05 HTML / CSS
教你使用Ubuntu搭建DNS服务器
2022/09/23 Servers