Nuxt默认模板、默认布局和⾃定义错误页⾯的实现
⼀、默认模板和默认布局
通常⽤于⼀些有固定格式的⽹站⽐如⼀些⽹站的头部和底部都是⼀样的此时即可使⽤默认模板
默认模板
在项⽬的根⽬录下创建⼀个名为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默认模板、默认布局和⾃定义错误页⾯内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！