Nuxt默认模板、默认布局和自定义错误页面

最新推荐文章于 2024-12-23 22:51:00 发布

Piconjo_Official

最新推荐文章于 2024-12-23 22:51:00 发布

阅读量3.1k

点赞数

分类专栏：前端文章标签： vue js javascript vue.js nuxt

本文链接：https://blog.youkuaiyun.com/Piconjo/article/details/105991857

版权

前端专栏收录该内容

99 篇文章

订阅专栏

本文介绍了Nuxt.js项目中如何使用默认模板和默认布局，以及如何自定义错误页面。默认模板允许全局统一头部和底部，通过创建文件实现。默认布局仅修改<template>内的布局，而通过设置可以调整。对于自定义错误页面，可以在pages/_error.vue中定义，并通过props的error对象判断错误状态码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、默认模板和默认布局

通常用于一些有固定格式的网站比如一些网站的头部和底部都是一样的此时即可使用默认模板

默认模板

在项目的根目录下创建一个名为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>