Nuxt默认模板、默认布局和自定义错误页面的实现
一、默认模板和默认布局
通常用于一些有固定格式的网站 比如一些网站的头部和底部都是一样的 此时即可使用默认模板
默认模板
在项目的根目录下创建一个名为app.html的文件 Nuxt即可自动将其识别为默认模板:
用法和字符串拼接有点类似 可将{{HEAD}}视为头部内容 将{{APP}}视为页面主体内容
(HEAD和APP都需大写)
{{HEAD}}测试1
{{APP}}测试2
【Nuxt默认模板、默认布局和自定义错误页面的实现】重启服务器 即可显示效果
同样 删除默认模板也需要重启服务器才可生效
默认布局
默认布局和默认模板的区别是 默认布局只能修改标签内的布局 而默认模板能修改整个页面
在layouts/default.vue里设置默认布局:
测试1
测试2
二、自定义错误页面
在layouts/error.vue里定义错误页面:
当进入错误页面默认会传入一个error对象 用props接收 用v-if和v-else进行状态码的判断 页面不存在页面发生了一个错误返回首页
到此这篇关于Nuxt默认模板、默认布局和自定义错误页面的文章就介绍到这了,更多相关Nuxt默认模板、默认布局和自定义错误页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
推荐阅读
- thymeleaf|【大型电商项目开发】商城业务-首页搭建-thymeleaf模板引擎-36
- windows修改图片默认程序打开方式
- 性能测试方案(计划)模板
- java|java web实训任务书,课程设计任务书模板-《JavaWeb程序设计》.doc
- Springboot使用velocity模板引擎
- C++超详细讲解模板的使用
- Flask_Bootstrap框架表单模板Flask企业课学习
- #|Linux拓展之Shell默认变量值
- mysql增删改默认有锁_MySQL你必须掌握了解的锁知识!
- mysql默认的锁_mysql默认是悲观锁还是乐观锁