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 相关文章推荐
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
Apr 12 Javascript
通过身份证号得到出生日期和性别的js代码
Nov 23 Javascript
jquery操作复选框checkbox的方法汇总
Feb 05 Javascript
JS+CSS实现的经典tab选项卡效果代码
Sep 16 Javascript
跟我学习javascript的循环
Nov 18 Javascript
JS实现“隐藏与显示”功能(多种方法)
Nov 24 Javascript
微信小程序 页面跳转事件绑定的实例详解
Sep 20 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
Sep 14 Javascript
vue自定义tap指令及tap事件的实现
Sep 18 Javascript
vue插槽slot的理解和使用方法
Apr 03 Javascript
vue中实现Monaco Editor自定义提示功能
Jul 05 Javascript
layui自定义工具栏的方法
Sep 19 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 auth_http类库进行身份效验
2009/03/19 PHP
PHP中func_get_args(),func_get_arg(),func_num_args()的区别
2013/09/30 PHP
PHP实现图片压缩的两则实例
2014/07/19 PHP
thinkphp3.2同时连接两个数据库的简单方法
2019/08/13 PHP
laravel邮件发送的实现代码示例
2020/01/31 PHP
Javascript事件热键兼容ie|firefox
2010/12/30 Javascript
append和appendTo的区别以及appendChild用法
2013/12/24 Javascript
JavaScript获取table中某一列的值的方法
2014/05/06 Javascript
JavaScript转换二进制编码为ASCII码的方法
2015/04/16 Javascript
JavaScript数组和循环详解
2015/04/27 Javascript
Web纯前端“旭日图”实现元素周期表
2017/03/10 Javascript
基于vue.js的分页插件详解
2017/11/27 Javascript
移动前端图片压缩上传的实例
2017/12/06 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
2018/03/28 jQuery
js中数组对象去重的两种方法
2019/01/18 Javascript
浅谈layer弹出层按钮颜色修改方法
2019/09/11 Javascript
vue表单数据交互提交演示教程
2019/11/13 Javascript
python中使用sys模板和logging模块获取行号和函数名的方法
2014/04/15 Python
python 将md5转为16字节的方法
2018/05/29 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
使用Django搭建一个基金模拟交易系统教程
2019/11/18 Python
Python+unittest+requests+excel实现接口自动化测试框架
2020/12/23 Python
html5标记文字_动力节点Java学院整理
2017/07/11 HTML / CSS
印度在线购物网站:Paytmmall
2019/07/24 全球购物
Java提供了哪些企业应用编程接口
2015/02/13 面试题
校园自助餐厅的创业计划书
2013/12/26 职场文书
绿化先进工作者事迹材料
2014/01/30 职场文书
大学新闻系应届生求职信
2014/06/02 职场文书
五四青年节的活动方案
2014/08/20 职场文书
2015年爱国卫生月活动总结
2015/03/26 职场文书
企业财务总监岗位职责
2015/04/03 职场文书
大学毕业论文致谢词
2015/05/14 职场文书
公司欠款证明
2015/06/24 职场文书
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS
Java 使用类型为Object的变量指向任意类型的对象
2022/04/13 Java/Android
MySQL示例讲解数据库约束以及表的设计
2022/06/16 MySQL