如何将Nuxt默认模板、布局和自定义错误页面结合实现？

2026-04-03 10:131阅读0评论SEO资讯

内容介绍
文章标签
相关推荐

本文共计596个文字，预计阅读时间需要3分钟。

一、默认模板和默认布局 + 常用于一些有固定格式的网站 + 比如一些网站的头部和底部都是一样的 + 此时即可使用默认模板 + 默认模板 + 在项目的根目录下创建一个名为 app. 的文件 + 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里设置默认布局：

二、自定义错误页面

在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默认模板、默认布局和自定义错误页面内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！

标签：nuxt 默认模板布局