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 相关文章推荐
15款优秀的jQuery导航菜单插件分享
Jul 19 Javascript
JS按位非(~)运算符与~~运算符的理解分析
Jul 31 Javascript
JS实现简洁、全兼容的拖动层实例
May 13 Javascript
jquery任意位置浮动固定层插件用法实例
May 29 Javascript
mac上node.js环境的安装测试
Jul 03 Javascript
extjs简介_动力节点Java学院整理
Jul 17 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 Javascript
详解wepy开发小程序踩过的坑(小结)
May 22 Javascript
Vue的属性、方法、生命周期实例代码详解
Sep 17 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
Nov 11 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
Jul 09 Javascript
cypress测试本地web应用
Jun 01 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中使用CURL模拟登录并获取数据实例
2014/07/01 PHP
php中实现精确设置session过期时间的方法
2014/07/17 PHP
php获取随机数组列表的方法
2014/11/13 PHP
Symfony实现行为和模板中取得request参数的方法
2016/03/17 PHP
PHP多个图片压缩成ZIP的方法
2020/08/18 PHP
laravel与thinkphp之间的区别与优缺点
2021/03/02 PHP
asp 的 分词实现代码
2007/05/24 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
2013/04/20 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
2014/10/17 Javascript
JQuery右键菜单插件ContextMenu使用指南
2014/12/19 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
2015/04/21 Javascript
JavaScript类的写法
2016/09/17 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
2017/09/14 Javascript
vue-cli3搭建项目的详细步骤
2018/12/05 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
2019/08/20 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
2019/10/25 Javascript
Python常用库推荐
2016/12/04 Python
浅谈机器学习需要的了解的十大算法
2017/12/15 Python
Python求出0~100以内的所有素数
2018/01/23 Python
python八皇后问题的解决方法
2018/09/27 Python
Python 中的lambda函数介绍
2018/10/10 Python
Python文件循环写入行时防止覆盖的解决方法
2018/11/09 Python
python 并发编程 多路复用IO模型详解
2019/08/20 Python
python中altair可视化库实例用法
2021/01/26 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
美国Curacao百货连锁店网站:iCuracao.com
2019/07/20 全球购物
将"引用"作为函数返回值类型的格式、好处和需要遵守的规则
2016/02/09 面试题
大学生个人自我鉴定
2013/12/03 职场文书
教师求职信范文分享
2013/12/27 职场文书
资源工程专业毕业生求职信
2014/02/27 职场文书
喜之郎果冻广告词
2014/03/20 职场文书
单位接收函范文
2015/01/30 职场文书
写给女朋友的检讨书
2015/05/06 职场文书
高中升旗仪式主持词
2015/07/03 职场文书
全国劳模先进事迹材料(2016精选版)
2016/02/25 职场文书
简单聊聊Vue中的计算属性和属性侦听
2021/10/05 Vue.js