分享：nuxt自定义布局

万花丨凋

于 2020-05-25 09:26:46 发布

阅读量985

点赞数 1

CC 4.0 BY-SA版权

分类专栏： nuxt vue 文章标签： vue html

本文链接：https://blog.youkuaiyun.com/awseda/article/details/106326187

45 篇文章

订阅专栏

39 篇文章

订阅专栏

这篇博客介绍了如何在Nuxt.js中创建和使用自定义布局。通过在`layouts`目录下创建`blog.vue`文件，我们可以为页面如`pages/posts.vue`定义一个博客布局。了解更多关于页面layout属性的详细信息，可以参考Nuxt.js API文档和观看演示视频。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

layouts 目录中的每个文件 (顶级) 都将创建一个可通过页面组件中的 layout 属性访问的自定义布局。
假设我们要创建一个博客布局 并将其保存到layouts/blog.vue:

<template>
  <div>
    <div>我的博客导航栏在这里</div>
    <nuxt/>
  </div>
</template>

然后我们必须告诉页面 (即pages/posts.vue) 使用您的自定义布局：

<template>
<!-- Your template -->
</template>
<script>
export default {
  layout: 'blog'
  // page component definitions
}
</script>

更多有关 layout 属性信息: API 页面布局
点击查看演示视频了解自定义布局的实际效果。

链接1：https://zh.nuxtjs.org/api/pages-layout
链接2：https://www.youtube.com/watch?v=YOKnSTp7d38