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

赞 (0)

相关推荐

  • 详解基于 Nuxt 的 Vue.js 服务端渲染实践

    详解基于 Nuxt 的 Vue.js 服务端渲染实践

    Vue.js 是目前最火热的前端框架之一,而 Nuxt.js 是针对 Vue.js 推出的服务端渲染框架,通过高度定制化的配置以及简洁的 API,开发者可以快速进行服务端渲染项目的开发,本文将对 Nuxt.js 框架做一个简要介绍. 服务端渲染 服务端渲染(Server Side Render)并不是一个新的概念,在单页应用(SPA)还没有流行起来的时候,页面就是通过服务端渲染好,并传递给浏览器的.当用户需要访问新的页面时,需要再次请求服务器,返回新的页面. 为了优化体验,开发者们开始选择采用

  • 详解nuxt sass全局变量(公共scss解决方案)

    恩,经过朋友的帮助搞定的,因为 nuxt资料比较少的原因,很感谢  "包子"的帮助 注意  本案例  只是把你通用 的 比如 $colour :#009688 #5FB878 #393D49 #1E9FFF #F7B824 #FF5722 ; 以上这种通用的变量抽出来,方便你在其他scss的样式里面调用 比如 li { background: nth($colour,6) } 只存储变量,别放公共的样式进去切记公共的样式 你可以参考我之前的博客那种写法 我直接上案例吧sass_jb51

  • nuxt.js 缓存实践

    nuxt 是基于 vue 的 ssr 解决方案,可以是使用vue语法完成前后端的同构. 然而在与传统纯字符串拼接的 ssr 方案相比,性能就没那么好了, nuxt 需要在服务端生成虚拟 dom ,然后再序列化出HTML字符串,我们常说 nodejs 的高性能指的是异步IO操作频繁的场景而非CPU操作密集的场景,毕竟 nodejs 是运行在单线程下的,在涉及到高并发的场景下,性能就会有所下降,可以考虑采用合理的缓存策略 nuxt 的缓存可以分为 组件级别缓存 , API级别缓存 以及 页面级别缓存

  • nuxt框架中路由鉴权之Koa和Session的用法

    引子 博客的后台管理页面需要有登录系统,所以考虑做一下路由鉴权,实现方式也是 Nuxt 官网给出栗子来改写,顺便也将前后端路由给统一了. 路由拦截 前端方面主要通过利用 Nuxt 的中间件来做路由拦截,这里也是需要 Vuex 状态树来做. middleware middleware/auth.js export default function ({ store, redirect }) { if (!store.state.user) { return redirect('/login') }

  • 详解Nuxt.js部署及踩过的坑

    Nuxt.js 提供了两种发布部署应用的方式:服务端渲染应用部署 和 静态应用部署. 静态应用部署就不说了,主要说说服务端渲染应用部署. 官方推荐部署方式 关于服务端渲染应用部署,官方文档是这么写的: 部署 Nuxt.js 服务端渲染的应用不能直接使用 nuxt 命令,而应该先进行编译构建,然后再启动 Nuxt 服务,可通过以下两个命令来完成: nuxt build nuxt start 推荐的 package.json 配置如下: { "name": "my-app&quo

  • 使用Nuxt.js改造已有项目的方法

    前言 如果我们需要对现有的vue项目进行ssr改造,使用nuxt.js是一个不错的选择.这里用作例子的"现有项目"是一个"高仿"饿了么外卖APP的spa.不过我没有把全部功能开发出来(全部做出来就不得了了),只是做出几个基本界面意思意思 下面就以这个demo为小白鼠进行ssr改造 准备 现有目录 很明显,这是使用vue-cli搭建的项目 其中prod.server.js是build之后的启动文件 dataa.json文件是模拟数据,在build/dev-server

  • Nuxt.js实现校验访问浏览器类型的中间件

    前言 Nuxt.js 十分简单易用.一个简单的项目只需将 nuxt 添加为依赖组件即可. 这个需求非常常见,分享出去的页面的有时候在手机访问,有时候别人是PC打开的; 若是不是共享同一个页面的情况,就需要拦截跳转了; 当然你要共享同一个页面也可以(放大化到PC也需要添加某些CSS,也需判断设备) 思路 本质上还是校验 UA , 只是这次是从 req 拿到,而不是从客户端获取再做处理 客户端的处理的姿势 window.navigator.userAgent 服务端的处理姿势 其实基本和上面的思路一

  • vue-router之nuxt动态路由设置的两种方法小结

    方法一:router-link <div class="slide-item" v-for="user in shareData.users"> <nuxt-link :to="'/community/member/'+ user.id"> <img src="../../static/head.png" alt=""> <p>{{user.nickname}

  • 详解如何在nuxt中添加proxyTable代理

    背景 在本地开发vue项目的时候,当你习惯了proxyTable解决本地跨域的问题,切换到nuxt的时候,你会发现,添加了proxyTable设置并没有什么作用,那是因为你是用的vue脚手架生成的vue项目,它里面已经帮你写好了相关的proxyTable的设置代码. build/dev-server.js // proxy api requests Object.keys(proxyTable).forEach(function (context) { var options = proxyTa

  • Nuxt.js开启SSR渲染的教程详解

    第一节:nuxt.js相关概述 nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染).Vue.js是开发SPA(单页应用)的,Nuxt.js这个框架,用Vue开发多页应用,并在服务端完成渲染,可以直接用命令把我们制作的vue项目生成为静态html. 1.那服务器端渲染到底有什么好处呢? 主要的原因时SPA(单页应用)不利于搜索引擎的SEO操作,Nuxt.js适合作新闻.博客.电影.咨询这样的需要搜索引擎提供流量的项目.如果你要作移动端的项目,就没必要使用这个框

随机推荐