布局模板的作用就是你先定义好一个布局页面,然后提取一些通用的UI或代码到可重用的模板中,提高代码复用性,从而降低代码的复杂度,让代码重用性提高。

简单说就是把一些通用的UI代码代码提出来,然后放在一个模板里,使用这个模板的每个页面都拥有这些代码UI了。

创建布局模板和使用模板

比如现在新建一个文件夹\layouts然后再里边写编写一个 defalut.vue文件,代码如下:

<template>
  <div>
    我是布局模板,default.vue
    <slot />
  </div>
</template>

上边这段代码就相当于你创建了一个布局模板。有了这个模板后,可以在任何你想要使用的页面中用<NuxtLayout>标签为页面赋予模板中的内容。比如我们想在每个页面中都赋予这个模板中的内容,就可以在 app.vue 页面中使用这个标签。

<template>
  <NuxtLayout name="default">
    <div>
      <hello-world />
      <NuxtPage></NuxtPage>
    </div>
  </NuxtLayout>
</template>

这样每个页面都会有布局模板中的效果,因为app.vue是每个页面的出口。

增加多个插槽

修改default.vue布局模板,增加第二个插槽,一个叫做one,一个叫做two。

<template>
  <div>
    我是布局模板,default.vue
    <slot name="one" />
    ---------
    <slot name="two" />
  </div>
</template>

这样编写,一个模板中就有了两个插槽,你可以在页面中通过<template #xxx>的形式来指定对应的模板插槽。 在index.vue中使用多个 <template> 配合模板实现多插槽。

<template>
  <NuxtLayout name="default">
    <template #one>
      <div class="">
        <h1>Index Page</h1>
        <NuxtLink to="/demo1">Demo1.vue</NuxtLink> <br />
        <NuxtLink to="/goods-mybj/demo2-38">Demo2.vue</NuxtLink><br />
        <NuxtLink to="/parent/child">/parent/child</NuxtLink><br />
        <NuxtLink to="/parent/two">/parent/two</NuxtLink><br />
      </div>
    </template>
    <template #two> 我是two中的内容 </template>
  </NuxtLayout>
</template>

<script setup>
import {} from "vue";
</script>

<style scoped></style>

注意上面的页面就精确的对应了模板的插槽。如果你作的页面都非常相似,可以好好的利用这个模板布局。

这个插槽也可以是多个,只要名字对应正确就可以实现。

结语

布局模板是非常好的一个创意,布局模板再加上组件化,可以大大提高代码的维护性和复用性。所以你想写出漂亮的代码,可以从这两方面多专研。下节我们就学习一下Nuxt3中组件的使用。

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » 06. Nuxt3布局模板

发表回复

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们