[羊腿]初识Nuxt3(三)

「时光不负，创作不停，本文正在参加2021年终总结征文大赛

承接上文, 初识Nuxt3(二)

配置自定义404页面

上文学到了通过pages目录下创建文件构建我们的路由， 通常情况下我们会配置一个404页面， 我们有提到了 通配路由 在当前的目录结构下可以做到匹配404页面， 但是我们不可能所有的嵌套的路由目录下都改一个通配路由

上文说到[x].vue 不能完全替代404 但是404.vue 文件就可以了 我尝试创建了 [...slug].vue也是可以的

404 page 有两种配置方式 404.vue [...slug].vue

[...slug].vue 匹配的优先级大于 404.vue, 每个目录下的[x].vue 优先级也是大于404.vue

我简单看了下源码里面 他有在找到404.vue 时会去 生成 vue-router4里的 通配路由配置'/:catchAll(.*)*', 这样的做到404页面 但是[...slug].vue 为什么可以匹配呢，暂时还不太清楚

布局Layouts

很多时候我们需要统一的整体布局，Nuxt3也给我们踢狗了Layouts目录来处理

默认的布局

如果我们需要修改整体的布局， 我们可以在Layouts目录下创建default.vue

<template>
    <div>
        default header
    </div>
    <slot />
    <div>
        default footer
    </div>
</template>

自定义布局

在Layouts目录下我们可以创建 custom.vue

<template>
    <div>
        custom header
    </div>
    <slot />
    <div>
        custom footer
    </div>
</template>

在pages/admin.vue里在做一些修改

<template>
    <div>
        <div>admin</div>
    </div>
</template>

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

也可以通过<NuxtLayout name="custom">

<template>
    <NuxtLayout name="custom">
        <div>admin</div>
    </NuxtLayout>
</template>

<script>
export default {
    layout: false
}
</script>

自定义插槽

修改下Layouts/custom.vue

<template>
    <slot name="header">
        custom header
    </div>
    <slot />
    <slot name="footer">
        custom footer
    </slot>
</template>

修改admin.vue

<template>
    <NuxtLayout name="custom">
        <template #header>这里是slot header</template>
        <template #footer>这里是slot footer</template>
        <div>admin</div>
    </NuxtLayout>
</template>

<script>
export default {
    layout: false
}
</script>

页面展示

这里是slot header
admin
这里是slot footer

如果我们要到setup语法

<script>
export default {
    layout: false
}
</script>
<script setup>
// xxx
</script>

components-组件

| components/
--| TheHeader.vue
--| TheFooter.vue

我们可以在项目中直接使用<the-header> <the-footer> 无需import 引入，而且也是按需加载的

总结

• 404 page 现在官方文档是[...slug].vue 404.vue没有提 因为是beta阶段 都有可能会变动
• Layouts布局 相比较Nuxt2的版本 有了插槽的功能
• components 按照约定的 component的name 是文件名