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管理作用域的问题
Apr 10 Javascript
常用的jQuery前端技巧收集
Dec 24 Javascript
JS实现微信里判断页面是否被分享成功的方法
Jun 06 Javascript
vue父组件向子组件传递多个数据的实例
Mar 01 Javascript
在react中使用vuex的示例代码
Jul 30 Javascript
微信小程序下拉框功能的实例代码
Nov 06 Javascript
微信小程序解除10个请求并发限制
Dec 18 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
Jan 15 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
Sep 10 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
Nov 04 Javascript
详解javascript中var与ES6规范中let、const区别与用法
Jan 11 Javascript
js实现鼠标滑动到某个div禁止滚动
Sep 17 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
基于Snoopy的PHP近似完美获取网站编码的代码
2011/10/23 PHP
Linux系统中设置多版本PHP共存配合Nginx服务器使用
2015/12/21 PHP
php使用ffmpeg向视频中添加文字字幕的实现方法
2016/05/23 PHP
详解PHP的抽象类和抽象方法以及接口总结
2019/03/15 PHP
实现51Map地图接口(示例代码)
2013/11/22 Javascript
当jQuery1.7遇上focus方法的问题
2014/01/26 Javascript
jquery用offset()方法获得元素的xy坐标
2014/09/06 Javascript
jQuery+PHP星级评分实现方法
2015/10/02 Javascript
javascript判断复选框是否选中的方法
2015/10/16 Javascript
AngularJs directive详解及示例代码
2016/09/01 Javascript
BootStrap Tooltip插件源码解析
2016/12/27 Javascript
angularjs点击图片放大实现上传图片预览
2017/02/24 Javascript
详解VUE2.X过滤器的使用方法
2018/01/11 Javascript
Vue实现动态创建和删除数据的方法
2018/03/17 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
2019/09/24 Javascript
在CentOS上配置Nginx+Gunicorn+Python+Flask环境的教程
2016/06/07 Python
详解python中asyncio模块
2018/03/03 Python
python中sys.argv函数精简概括
2018/07/08 Python
Python 中 function(#) (X)格式 和 (#)在Python3.*中的注意事项
2018/11/30 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
python+openCV利用摄像头实现人员活动检测
2019/06/22 Python
Python中新式类与经典类的区别详析
2019/07/10 Python
python matplotlib库绘制散点图例题解析
2019/08/10 Python
pytorch使用tensorboardX进行loss可视化实例
2020/02/24 Python
解决Windows下python和pip命令无法使用的问题
2020/08/31 Python
Python Pandas list列表数据列拆分成多行的方法实现
2020/12/14 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
一款纯css3实现的tab选项卡的实列教程
2014/12/11 HTML / CSS
台湾旅游网站:灿星旅游
2018/10/11 全球购物
3D空间设计学生找工作的自我评价
2013/10/28 职场文书
思想品德自我评价
2014/02/04 职场文书
环保倡议书400字
2014/05/15 职场文书
农村党员一句话承诺
2014/05/30 职场文书
幼儿园健康教育方案
2014/06/14 职场文书
小区门卫岗位职责范本
2014/08/24 职场文书
我的收音机情缘
2022/04/05 无线电