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 相关文章推荐
JS代码判断IE6,IE7,IE8,IE9的函数代码
Aug 02 Javascript
按下回车键指向下一个位置的一个函数代码
Mar 10 Javascript
在JS数组特定索引处指定位置插入元素的技巧
Aug 24 Javascript
jquery实现简单实用的弹出层效果代码
Oct 15 Javascript
jquery采用oop模式class类的使用示例
Jan 22 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
Apr 18 Javascript
判断数组是否包含某个元素的js函数实现方法
May 19 Javascript
vue.js整合mint-ui里的轮播图实例代码
Dec 27 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
Feb 11 Javascript
Vue父组件向子组件传值以及data和props的区别详解
Mar 02 Javascript
vue路由分文件拆分管理详解
Aug 13 Javascript
Vue仿Bibibili首页的问题
Jan 21 Vue.js
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
PHP随机字符串生成代码(包括大小写字母)
2013/06/24 PHP
PHP验证码函数代码(简单实用)
2013/09/29 PHP
PHP记录和读取JSON格式日志文件
2016/07/07 PHP
Laravel框架模型的创建及模型对数据操作示例
2019/05/07 PHP
thinkPHP5.1框架使用SemanticUI实现分页功能示例
2019/08/03 PHP
Javascript计算时间差的函数分享
2011/07/04 Javascript
浅析JQuery UI Dialog的样式设置问题
2013/12/18 Javascript
connect中间件session、cookie的使用方法分享
2014/06/17 Javascript
如何编写高质量JS代码
2014/12/28 Javascript
jQuery使用之处理页面元素用法实例
2015/01/19 Javascript
javascript:void(0)点击登录没反应怎么解决
2015/11/13 Javascript
JS验证邮件地址格式方法小结
2015/12/01 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
2017/09/05 Javascript
web前端vue之CSS过渡效果示例
2018/01/10 Javascript
vue 实现复制内容到粘贴板clipboard的方法
2018/03/17 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
2018/05/10 Javascript
vue 解决IOS10低版本白屏的问题
2020/11/17 Javascript
Python使用SocketServer模块编写基本服务器程序的教程
2016/07/12 Python
Python中input与raw_input 之间的比较
2017/08/20 Python
通过Py2exe将自己的python程序打包成.exe/.app的方法
2018/05/26 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
Python scrapy爬取小说代码案例详解
2020/07/09 Python
python 实现压缩和解压缩的示例
2020/09/22 Python
pandas 数据类型转换的实现
2020/12/29 Python
如何用Python编写一个电子考勤系统
2021/02/08 Python
美国领先的户外服装与装备用品店:Moosejaw
2016/08/25 全球购物
Myprotein法国官网:欧洲第一运动营养品牌
2019/03/26 全球购物
施华洛世奇新加坡官网:SWAROVSKI新加坡
2020/10/06 全球购物
如何写好优秀的创业计划书
2014/01/30 职场文书
感恩节活动策划方案
2014/05/16 职场文书
我的中国梦演讲稿小学篇
2014/08/19 职场文书
卖车协议书范本4篇
2014/10/01 职场文书
拾金不昧表扬信怎么写
2015/05/04 职场文书
2015年创先争优工作总结
2015/05/23 职场文书
HTML+VUE分页实现炫酷物联网大屏功能
2021/05/27 Vue.js
高考要来啦!用Python爬取历年高考数据并分析
2021/06/03 Python