Nuxt默认模板、默认布局和自定义错误页面的实现
这篇文章主要介绍了Nuxt默认模板、默认布局和自定义错误页面的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
通常用于一些有固定格式的网站 比如一些网站的头部和底部都是一样的 此时即可使用默认模板
默认模板
<的文件 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对象 用pro凡科抠图接收 用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 {
pro凡科抠图: ["error"],
layout: "blog" // 可以为错误页面指定自定义的布局
/script
到此这篇关于Nuxt默认模板、默认布局和自定义错误页面的文章就介绍到这了,更多相关Nuxt默认模板、默认布局和自定义错误页面内容请搜索凡科以前的文章或继续浏览下面的