当前位置: 首页 > 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}, // 只会生成多次静态页面 自动重新验证页面的时候需要重新生成}

相关文章:

【Nuxt】Layout 布局和渲染模式

NuxtLayout app.vue <NuxtLayout><NuxtPage/></NuxtLayout>然后默认的布局 需要 写在 ~/layouts/default.vue 下面&#xff0c;其他自定义的布局也在写在 layouts 目录下。 default.vue <template><div class"app-container"><d…...

C:指针学习(1)-学习笔记

目录 前言&#xff1a; 知识回顾&#xff1a; 1、const 1.1 const修饰普通变量 1.2 const修饰指针变量 1.3 总结&#xff1a; 2、指针运算 2.1 指针-整数 2.2 指针-指针 2.3 指针的关系运算 3、指针的使用 结语&#xff1a; 前言&#xff1a; 距离上一次更新关于初…...

【LVS】负载均衡之NAT模式

一、LVS概念 LVS&#xff08;Linux Virtual Server&#xff09;是一个基于Linux操作系统的虚拟服务器技术&#xff0c;用于实现负载均衡和高可用性。LVS通过将客户端的请求分发到多台后端服务器上&#xff0c;从而提高整体服务的处理能力和可靠性。 二、LVS优势 高性能&…...

ASP.NET Core 基础 - 入门实例

一. 下载 1. 下载vs2022 Visual Studio 2022 IDE - 适用于软件开发人员的编程工具 (microsoft.com) 学生,个人开发者选择社区版就行,免费的. 安装程序一直下一步下一步就行,别忘了选择安装位置,如果都放在C盘的话,就太大了. 2. 选择工作负荷 准备工作完成 二. 创建新项目 三…...

机器人主板维修|ABB机械手主板元器件故障

【ABB机器人电路板故障原因诊断】 针对上述故障现象&#xff0c;我们需要对ABB机器人IO板进行详细的故障诊断。以下是一些可能的故障原因&#xff1a; 1. 元器件老化或损坏&#xff1a;ABB机械手安全面板上的元器件在长期使用过程中可能出现老化、损坏或接触不良等问题&#xf…...

大数据Flink(一百零六):什么是阿里云实时计算Flink版

文章目录 什么是阿里云实时计算Flink版 一、产品概述 二、产品架构 三、产品优势 什么是阿里云实时计算Flink版 阿里云实时计算Flink版是一套基于Apache Flink构建的⼀站式实时大数据分析平台&#xff0c;提供端到端亚秒级实时数据分析能力&#xff0c;并通过标准SQL降低业…...

ERCOT中的专业术语解释

在ERCOT中&#xff0c;ECRSM 代表的是 “Emergency Contingency Resource Supplementary Market”。这个术语涉及到紧急备用资源市场&#xff0c;用于应对电力需求或供应的紧急情况。在ERCOT电网中&#xff0c;当系统面临极端情况或资源不足时&#xff0c;ECRSM 可以帮助确保电…...

Python酷库之旅-第三方库Pandas(069)

目录 一、用法精讲 276、pandas.Series.dt.is_quarter_start属性 276-1、语法 276-2、参数 276-3、功能 276-4、返回值 276-5、说明 276-6、用法 276-6-1、数据准备 276-6-2、代码示例 276-6-3、结果输出 277、pandas.Series.dt.is_quarter_end属性 277-1、语法 …...

基于hutools的国密SM2、3、4

文章目录 前言一. 代码 前言 最近还要深度研究hutools底层实现&#xff0c;一定要搞透澈&#xff0c;本章将会是持续更新 参考资料&#xff1a; Java代码实现SM2算法以及注意点总结&#xff08;踩坑记录&#xff09; 国密算法工具Smutil 一. 代码 import cn.hutool.core.uti…...

进程的等待(非阻塞轮询+阻塞)和替换控制详解

引言 在Linux系统中&#xff0c;进程管理是核心功能之一。理解进程的创建、执行和终止是系统编程中的基础。本文将深入探讨Linux中的进程控制机制&#xff0c;包括进程的生命周期、父子进程的交互、以及进程状态的管理 1. 进程创建&#xff1a;fork()函数 在Linux操作系统中…...

24/8/6算法笔记 支持向量机

支持向量机&#xff08;Support Vector Machine, SVM&#xff09;是一种监督学习算法&#xff0c;主要用于分类和回归任务。它基于统计学习理论中的结构风险最小化原理&#xff0c;通过找到数据点之间的最优边界来实现模型的泛化能力。 import numpy as np import matplotlib.…...

测试用例等级划分

基本等级&#xff08;‌Level 1或P0&#xff09;‌&#xff1a;‌这类用例设计系统基本功能&#xff0c;‌执行失败会导致多处重要功能无法运行。‌例如&#xff0c;‌单表维护中的增加功能、‌最平常的业务使用等&#xff0c;‌这些是发生概率较高的功能用例。‌这类用例在每一…...

打造Perl编译器前端:自定义语言处理的魔法

打造Perl编译器前端&#xff1a;自定义语言处理的魔法 Perl是一种强大而灵活的编程语言&#xff0c;它提供了丰富的文本处理能力&#xff0c;使其成为实现自定义编译器前端的理想选择。编译器前端通常负责源代码的词法分析、语法分析和语义分析。本文将详细介绍如何在Perl中实…...

Visual Studio 和 Visual Studio Code 的比较与应用偏向

Visual Studio 和 Visual Studio Code&#xff08;VS Code&#xff09;是微软开发的两个不同的开发工具&#xff0c;各有特点和优势&#xff0c;适用于不同的开发需求。下面是详细的比较和在实际应用中的偏向。 功能和特性 Visual Studio 完整的IDE&#xff1a;支持多种编程…...

Python打开JSON/CSV文件的正确方式(针对UnicodeDecodeError)

前言 我们在使用python的过程中&#xff0c;经常需要它完成一些数据处理的工作&#xff0c;其中尤以json/csv文件为常见。今天&#xff0c;博主针对UnicodeDecodeError异常进行试验&#xff0c;因为这个是新手最容易犯错的地方。 Q&#xff1a;如何应对 UnicodeDecodeError 读…...

深入解析TikTok广告开户白名单:规范与申请指南

在TikTok的广告平台上&#xff0c;白名单&#xff08;Whitelist&#xff09;系统作为一种重要的审核和管理机制&#xff0c;对广告账户的开设与运营起着至关重要的作用。 一、什么是TikTok广告开户白名单&#xff1f; 白名单的定义 白名单是一种预先批准的账户或广告内容列表…...

CSS技巧专栏:一日一例 19 -纯CSS实现超酷的水晶按钮特效

CSS技巧专栏:一日一例 19 -纯CSS实现超酷的水晶按钮特效 今天给大家分享一个纯CSS按钮水晶按钮,效果很赞,希望对大家有所帮助。 本例图片 案例分析 这个按钮看起来效果很赞,我们分析一下它由几个层组成: 1. 按钮本体:渐变层+按钮文字 2.用before伪元素实现高光层+内…...

ArcGIS基础:基于数据图框实现地理坐标系下不同投影转换的可视化效果

ArcGIS默认以第一次加载数据的坐标系决定整个工程的坐标系 可以通过改变数据框的投影坐标系&#xff0c;对地理数据进行快速投影变换&#xff0c;以可视化展示不同投影坐标系下的地理数据形状和形态 对数据框坐标系的改变&#xff0c;只是针对的显示参数的改变&#xff0c;并…...

⚡4. Kubernetes核心资源管理操作实战

文章目录 kubectl [command] [TYPE] [NAME] [flags]kubectl run 资源名称 --image镜像名称 --port端口号kubectl create -f 配置文件名称.yaml kubectl apply -f 配置文件名称.yaml快速编写yaml文件&#xff0c;通过命令导出新的yaml文件Kubernetes常见资源类型和缩写 kubectl …...

【Wireshark 抓 CAN 总线】Wireshark 抓取 CAN 总线数据的实现思路

最近看到一个帖子 Wireshark 对接 Windows 系统命名管道&#xff0c;抓取数据 我突然想到一个很有意思的方式 你没看错 用 Wireshark 来抓取 CAN 总线数据 【其实 Wireshark 上有 CAN 总线的的解码器&#xff0c;不信你可以在表达式栏打 can 试下&#xff0c;是有这个解码器的】…...

DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

逻辑回归:给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

可靠性+灵活性:电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

连锁超市冷库节能解决方案:如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

html-<abbr> 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

让回归模型不再被异常值“带跑偏“,MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用

一、方案背景​ 在现代生产与生活场景中&#xff0c;如工厂高危作业区、医院手术室、公共场景等&#xff0c;人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式&#xff0c;存在效率低、覆盖面不足、判断主观性强等问题&#xff0c;难以满足对人员打手机行为精…...