十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
小编这次要给大家分享的是Nuxt如何实现默认模板、默认布局和自定义错误页面,文章内容丰富,感兴趣的小伙伴可以来了解一下,希望大家阅读完这篇文章之后能够有所收获。
成都创新互联长期为上千客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为互助企业提供专业的成都网站设计、做网站,互助网站改版等技术服务。拥有十多年丰富建站经验和众多成功案例,为您定制开发。
一、默认模板和默认布局
通常用于一些有固定格式的网站 比如一些网站的头部和底部都是一样的 此时即可使用默认模板
默认模板
在项目的根目录下创建一个名为app.html的文件 Nuxt即可自动将其识别为默认模板:
用法和字符串拼接有点类似 可将{{HEAD}}视为头部内容 将{{APP}}视为页面主体内容
(HEAD和APP都需大写)
{{HEAD}}测试1
{{APP}}测试2
重启服务器 即可显示效果
同样 删除默认模板也需要重启服务器才可生效
默认布局
默认布局和默认模板的区别是 默认布局只能修改标签内的布局 而默认模板能修改整个页面
在layouts/default.vue里设置默认布局:
测试1
测试2
二、自定义错误页面
在layouts/error.vue里定义错误页面:
当进入错误页面默认会传入一个error对象 用props接收 用v-if和v-else进行状态码的判断页面不存在
页面发生了一个错误
返回首页
看完这篇关于Nuxt如何实现默认模板、默认布局和自定义错误页面的文章,如果觉得文章内容写得不错的话,可以把它分享出去给更多人看到。