纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

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

Piconjo_Official   2021-04-22 我要评论

一、默认模板和默认布局

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

默认模板

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

相关文章

猜您喜欢

  • oracle 12560解决办法 Oracle数据库ORA-12560错误问题的解决办法

    想了解Oracle数据库ORA-12560错误问题的解决办法的相关内容吗,飞鸟与游鱼在本文为您仔细讲解oracle 12560解决办法的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Oracle数据库ORA-12560错误,ora12560解决办法,下面大家一起来学习吧。..
  • mysql 8.0.20安装配置方法 mysql 8.0.20 安装配置方法图文教程

    想了解mysql 8.0.20 安装配置方法图文教程的相关内容吗,mr_five55在本文为您仔细讲解mysql 8.0.20安装配置方法的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:mysql8.0.20,mysql8.0,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.moon-script.com 【月光下载】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式