Nuxt.js学习(六) --- Nuxt.js布局

[TOC]

1、布局

1.1、官方文档:

默认布局

可通过添加 layouts/default.vue 文件来扩展应用的默认布局。

提示: 别忘了在布局文件中添加 <nuxt/> 组件用于显示页面的主体内容。

默认布局的源码如下：

<template>
  <nuxt/>
</template>

自定义布局

layouts 目录中的每个文件 (顶级) 都将创建一个可通过页面组件中的 layout 属性访问的自定义布局。

假设我们要创建一个 博客布局 并将其保存到layouts/blog.vue:

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

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

1.2、实际操作(练习实例)

1.2.1、在layouts下新建一个layout.vue，写入以下代码

<template>
  <div>
    <p>
      <a href="https://my.oschina.net/tingqianyunluo">庭前云落的博客</a>
    </p>
    <nuxt />
  </div>
</template>

1.2.2、在主页面导入

<template>
  <div>
    <ul>
      <li>
        <nuxt-link :to="{name:'index'}">Home</nuxt-link>
        <nuxt-link :to="{name:'about'}">ABOUT</nuxt-link>
        <nuxt-link :to="{name:'news',params:{name:'庭前云落'}}">NEWS</nuxt-link>
      </li>
    </ul>
  </div>
</template>

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

<style>
</style>

1.3、测试：只有在pages/index页面上有效果，而上面说的默认模板是全部页面都有

布局和模板同时存在的效果：

总结：

要区分默认模版和默认布局的区别，模版可以订制很多头部信息，包括IE版本的判断；模版只能定制<template>里的内容，跟布局有关系。在工作中修改时要看情况来编写代码。