当前位置: 首页 > news >正文

【Nuxt】Layout 布局和渲染模式

NuxtLayout

app.vue

  <NuxtLayout><NuxtPage/></NuxtLayout>

然后默认的布局 需要 写在 ~/layouts/default.vue 下面,其他自定义的布局也在写在 layouts 目录下。

default.vue

<template><div class="app-container"><div class="header">Header</div><slot></slot><div class="footer">Footer</div></div>
</template>
<script setup></script>
<style scoped>
.header {background-color: #6dedc4;padding: 10px;text-align: center;
}
.footer {background-color: #55abd2;padding: 10px;text-align: center;
}
</style>

这样所有页面都使用了 默认布局,slot 插槽里面内容是路由变化带来的。

如果不希望所有页面都使用默认布局,还可以用 自定义布局:

login.vue

<script setup lang="ts">
definePageMeta({layout: 'custom'
})
</script><template>
<div>login</div>
</template><style scoped></style>

custom.vue

<script setup lang="ts"></script><template><div><p>自定义布局</p><slot /></div>
</template><style scoped></style>

此外 NuxtLayout 还有一个属性 name, 可以指定某个样式作为内部 NuxtPage 的布局,但是它的优先级要高于 definePageMeta.layout 。

所以如果给上述加上 name,则 login 页面的自定义布局失效。

在这里插入图片描述

渲染模式

在这里插入图片描述

    // ssr: false,// Experimental APIrouteRules: {'/': {ssr: true},'/about': {ssr: false},'/cart': {static: true}, // 只会在构建时生成一次静态页面'/checkout': {swr: true}, // 只会生成多次静态页面 自动重新验证页面的时候需要重新生成}
http://www.lryc.cn/news/416964.html

相关文章:

  • C:指针学习(1)-学习笔记
  • 【LVS】负载均衡之NAT模式
  • ASP.NET Core 基础 - 入门实例
  • 机器人主板维修|ABB机械手主板元器件故障
  • 大数据Flink(一百零六):什么是阿里云实时计算Flink版
  • ERCOT中的专业术语解释
  • Python酷库之旅-第三方库Pandas(069)
  • 基于hutools的国密SM2、3、4
  • 进程的等待(非阻塞轮询+阻塞)和替换控制详解
  • 24/8/6算法笔记 支持向量机
  • 测试用例等级划分
  • 打造Perl编译器前端:自定义语言处理的魔法
  • Visual Studio 和 Visual Studio Code 的比较与应用偏向
  • Python打开JSON/CSV文件的正确方式(针对UnicodeDecodeError)
  • 深入解析TikTok广告开户白名单:规范与申请指南
  • CSS技巧专栏:一日一例 19 -纯CSS实现超酷的水晶按钮特效
  • ArcGIS基础:基于数据图框实现地理坐标系下不同投影转换的可视化效果
  • ⚡4. Kubernetes核心资源管理操作实战
  • 【Wireshark 抓 CAN 总线】Wireshark 抓取 CAN 总线数据的实现思路
  • Linux网络编程3
  • gitlab 服务器安装
  • 【pytorch】全连接网络简单二次函数拟合
  • git提交到本地仓库了,怎么撤回
  • lua学习(1)
  • SQL报错注入之updatexml
  • 单元测试的重要性
  • mysql线上查询数据注意锁表问题
  • UE5 右键菜单缺少Generate Visual Studio project files
  • 前端性能优化-webpack构建优化
  • Traefik:部署与实战