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 相关文章推荐
10个实用的脚本代码工具
May 04 Javascript
Jquery获取和修改img的src值的方法
Feb 17 Javascript
jQuery实现监控页面所有ajax请求的方法
Dec 10 Javascript
学习Javascript面向对象编程之封装
Feb 23 Javascript
JavaScript  cookie 跨域访问之广告推广
Apr 20 Javascript
Ionic快速安装教程
Jun 03 Javascript
js实现消息滚动效果
Jan 18 Javascript
前端分页功能的实现以及原理(jQuery)
Jan 22 Javascript
Mac系统下Webstorm快捷键整理大全
May 28 Javascript
JS实现的视频弹幕效果示例
Aug 17 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
Aug 22 Javascript
微信小程序云开发使用方法新手初体验
May 16 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 flush类输出缓冲剖析
2008/10/19 PHP
PHP 压缩文件夹的类代码
2009/11/05 PHP
PHP 作用域解析运算符(::)
2010/07/27 PHP
Php output buffering缓存及程序缓存深入解析
2013/07/15 PHP
PHP获取MAC地址的具体实例
2013/12/13 PHP
Laravel 4 初级教程之安装及入门
2014/10/30 PHP
JSON字符串传到后台PHP处理问题的解决方法
2016/06/05 PHP
ThinkPHP3.2.3框架实现执行原生SQL语句的方法示例
2019/04/03 PHP
JS实现self的resend
2010/07/22 Javascript
js 控制图片大小核心讲解
2013/10/09 Javascript
JavaScript中document对象使用详解
2015/01/06 Javascript
通过伪协议解决父页面与iframe页面通信的问题
2015/04/05 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
2015/04/26 Javascript
javascript实现的简单的表单验证
2015/07/10 Javascript
JS实现的左侧竖向滑动菜单效果代码
2015/10/19 Javascript
JS插件overlib用法实例详解
2015/12/26 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
2016/09/28 Javascript
纯js模仿windows系统日历
2017/02/04 Javascript
JS实现websocket长轮询实时消息提示的效果
2017/10/10 Javascript
jquery获取元素到屏幕四周可视距离的方法
2018/09/05 jQuery
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
2019/05/07 Javascript
基于JS实现一个随机生成验证码功能
2019/05/29 Javascript
使用watch在微信小程序中实现全局状态共享
2019/06/03 Javascript
浅谈react-router@4.0 使用方法和源码分析
2019/06/04 Javascript
vue自定义标签和单页面多路由的实现代码
2020/05/03 Javascript
Python类定义和类继承详解
2015/05/08 Python
python3.6+opencv3.4实现鼠标交互查看图片像素
2018/02/26 Python
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
Django 接收Post请求数据,并保存到数据库的实现方法
2019/07/12 Python
python使用ctypes库调用DLL动态链接库
2020/10/22 Python
css3 给背景设置渐变色的方法
2019/09/12 HTML / CSS
大学生撤销处分思想汇报
2014/09/12 职场文书
2014教师年度工作总结
2014/11/10 职场文书
酒店财务总监岗位职责
2015/04/03 职场文书
2015年出纳年终工作总结
2015/05/14 职场文书
Python中threading库实现线程锁与释放锁
2021/05/17 Python