DDR爱好者之家 Design By 杰米
一、默认模板和默认布局
通常用于一些有固定格式的网站 比如一些网站的头部和底部都是一样的 此时即可使用默认模板
默认模板
在项目的根目录下创建一个名为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>
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年04月24日
2024年04月24日
- dnf熊猫套装怎么获得
- MichaelBarenboim,NataliaPegarkova-Barenboim-Mendelssohn_LiederohneWorte(2024)[24-96]fla
- LondonChoralSinfonia-VaughanWilliams_Retrospect(2024)[WAV+CUE]
- 赵传2021-老不休[诗宜文化][WAV+CUE]
- 外媒盘点顶级精细游戏TOP5:《荒野大镖客:救赎2》登顶
- 官方发布《星刃》爆发技能介绍:次元斩切碎强敌
- 《百英雄传》M站均分78:值得一试的复古佳作
- 麻园诗人.2022-闭上眼睛的声音【博山娱乐】【FLAC分轨】
- 任贤齐.1997-很受伤【滚石】【WAV+CUE】
- 群星.1998-还珠格格·苍天有泪琼瑶大卖连续剧全纪录EP【上华】【WAV+CUE】
- dnf燃烧疲劳值什么意思
- dnf男大枪110版本装备搭配
- dnf畅玩任务系统的限定任务
- 《恶意不息》沃里克打法技巧
- 《恶意不息》属性点数作用介绍