Nuxt3从入门到实战之巧用布局模板

前言

上一篇写了nuxt3路由系统，我们试用了两个重要功能：动态路由和嵌套路由。

体验便捷的同时，当然也会有另一些重要需求，比如评论区小伙伴提出的：别名、重定向和路由守卫等需求，我考查了v2中的可用方案：

• router-extras-module 在页面中自定义路由参数
• @nuxtjs/router 覆盖Nuxt路由并编写自己的 router.js 文件
• 在配置文件nuxt.config.js中使用router.extendRoutes 选项

经测试已经全部失效了！所以小伙伴们需要等以上两个扩展更新，或者你多投几个币，我教你咋写: )

这一篇我们研究一下nuxt的布局系统，通过这个自定义的布局页，我们可以提取一些通用UI或代码到可重用的布局组件中，提高代码复用性，非常便捷高效，下面我们开始吧！

默认布局

那些放在layouts/目录下的SFC会被自动加载进来，如果我们创建的SFC名为default.vue，将会被用于项目所有页面中作为布局模板。

layouts/default.vue：

<template>
  <div>
    通用布局页，default.vue:
    <slot />
  </div>
</template>

效果如下：可见还是嵌套在app.vue中

image.png

自定义布局文件

如果我们的布局文件名不叫default，而是别的，比如custom.vue，想要使用它们，就必须在某个页面中设置页面属性layout。

custom.vue：

<template>
  <div>
    内容来自自定义布局页custom.vue！
    <slot />
  </div>
</template>

可以在helloworld.vue中试试custom这个布局，helloworld.vue：

<script>
export default {
  layout: "custom"
}
</script>

试了一下，嵌套路由中是没有效果的，这可能是有意为之的

使用NuxtLayout

可以使用NuxtLayout组件结合slots获得完全控制力，同时需要设置组件选项layout: false。

helloworld.vue

<template>
    <NuxtLayout name="custom">
    <template #header>
         <h1>hello page</h1>
    </template>
    some content...
    </NuxtLayout>
</template>
<script>
export default {
  layout: false,
};
</script>

修改一下custom.vue

<template>
  <div>
    内容来自自定义布局页custom.vue！
    <slot name="header"/>
    <slot />
  </div>
</template>

我们甚至能组合多个布局页：

<template>
  <div>
    <NuxtLayout name="custom">
      <template #header>
        <h1>hello page</h1>
      </template>
      some content...
    </NuxtLayout>

    <NuxtLayout name="default">
      some content...
    </NuxtLayout>
  </div>
</template>

效果如下：

image.png

配合<script setup>一起使用

由于需要设置layout选项，所以在这个script标签旁边同时使用<script setup>标签，它们都能生效。

<script>
export default {
  layout: "custom",
};
</script>

<script setup>
// your setup script
</script>