【Nuxt】Layout 布局和渲染模式

NuxtLayout

app.vue

vue 复制代码
  <NuxtLayout>
    <NuxtPage/>
  </NuxtLayout>

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

default.vue

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

vue 复制代码
<script setup lang="ts">
definePageMeta({
  layout: 'custom'
})
</script>

<template>
<div>login</div>
</template>

<style scoped>

</style>

custom.vue

vue 复制代码
<script setup lang="ts">

</script>

<template>
  <div>
    <p>自定义布局</p>
    <slot />
  </div>
</template>

<style scoped>

</style>

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

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

渲染模式

ts 复制代码
    // ssr: false,
    // Experimental API
    routeRules: {
        '/': {ssr: true},
        '/about': {ssr: false},
        '/cart': {static: true}, // 只会在构建时生成一次静态页面
        '/checkout': {swr: true}, // 只会生成多次静态页面 自动重新验证页面的时候需要重新生成
    }
相关推荐
黄焖鸡能干四碗3 分钟前
智慧教育,智慧校园,智慧安防学校建设解决方案(PPT+WORD)
java·大数据·开发语言·数据库·人工智能
zhong liu bin7 分钟前
Vue框架技术详解——项目驱动概念理解【前端】【Vue】
前端·javascript·vue.js·vscode·vue
前端 贾公子25 分钟前
ElementUI 中 validateField 对部分表单字段数组进行校验时多次回调问题
前端·javascript·elementui
棒棒的唐26 分钟前
vue2 elementUI 登录页面实现回车提交登录的方法
前端·javascript·elementui
zhangzuying102630 分钟前
基于Vue3 +ElementuiPlus + Dexie.js自研的浏览器插件新建标签页tab
vue.js·typescript·echarts
一只乔哇噻32 分钟前
java后端工程师进修ing(研一版 || day41)
java·开发语言·学习·算法
lichong95135 分钟前
【混合开发】vue+Android、iPhone、鸿蒙、win、macOS、Linux之video 的各种状态和生命周期调用说明
android·vue.js·macos
钮钴禄·爱因斯晨41 分钟前
深入剖析LLM:从原理到应用与挑战
开发语言·人工智能
知识分享小能手1 小时前
React学习教程,从入门到精通,React 使用属性(Props)创建组件语法知识点与案例详解(15)
前端·javascript·vue.js·学习·react.js·前端框架·vue
六点半8881 小时前
【C++】C++11 篇二
开发语言·c++