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果冻抖动效果实现方法
Jan 15 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
Oct 23 Javascript
Javascript基础_简单比较undefined和null 值
Jun 14 Javascript
需要牢记的JavaScript基础知识
Sep 25 Javascript
javascript读取文本节点方法小结
Dec 15 Javascript
微信小程序实现选项卡功能
Jun 19 Javascript
vuex 使用文档小结篇
Jan 11 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
Dec 10 Javascript
js中let能否完全替代IIFE
Jun 15 Javascript
通过GASP让vue实现动态效果实例代码详解
Nov 24 Javascript
Vue跨域请求问题解决方案过程解析
Aug 07 Javascript
分享几个JavaScript运算符的使用技巧
Apr 24 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
PHP连接access数据库
2008/03/27 PHP
php5 图片验证码实现代码
2009/12/11 PHP
PHP合并数组+与array_merge的区别分析
2010/08/01 PHP
php算开始时间到过期时间的相隔的天数
2011/01/12 PHP
如何获知PHP程序占用多少内存(memory_get_usage)
2012/09/23 PHP
php判断字符串在另一个字符串位置的方法
2014/02/27 PHP
php调用google接口生成二维码示例
2014/04/28 PHP
示例详解Laravel的注册重构
2016/08/14 PHP
PHP实现根据数组某个键值大小进行排序的方法
2018/03/13 PHP
PHP通过GD库实现验证码功能示例
2019/02/23 PHP
tp5.1 框架路由操作-URL生成实例分析
2020/05/26 PHP
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
2010/03/27 Javascript
jquery 图片缩放拖动的简单实例
2014/01/08 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
2015/10/23 Javascript
javascript实现不同颜色Tab标签切换效果
2016/04/27 Javascript
简单解析JavaScript中的__proto__属性
2016/05/10 Javascript
JavaScript地理位置信息API
2016/06/11 Javascript
微信小程序实现锚点定位楼层跳跃的实例
2017/05/18 Javascript
vue时间格式化实例代码
2017/06/13 Javascript
vue强制刷新组件的方法示例
2019/02/28 Javascript
javascript面向对象三大特征之继承实例详解
2019/07/24 Javascript
vuex存值与取值的实例
2019/11/06 Javascript
React学习之JSX与react事件实例分析
2020/01/06 Javascript
Python使用requests及BeautifulSoup构建爬虫实例代码
2018/01/24 Python
Python补齐字符串长度的实例
2018/11/15 Python
在scrapy中使用phantomJS实现异步爬取的方法
2018/12/17 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
libreoffice python 操作word及excel文档的方法
2019/07/04 Python
python3 os进行嵌套操作的实例讲解
2020/11/19 Python
澳大利亚便宜的家庭购物网站:CrazySales
2018/02/06 全球购物
英国异国风情旅游网站:Travel Talk Tours(团体旅游、探险旅游、帆船假期)
2018/07/26 全球购物
工程师求职简历的自我评价分享
2013/10/10 职场文书
2015年生产部工作总结范文
2015/05/25 职场文书
假如给我三天光明读书笔记
2015/06/26 职场文书
Nginx+Tomcat实现负载均衡、动静分离的原理解析
2021/03/31 Servers
Elasticsearch Recovery 详细介绍
2022/04/19 Java/Android