Nuxt的默认模板和默认布局（视图layout）---04

最新推荐文章于 2024-07-07 16:33:23 发布

muzidigbig

最新推荐文章于 2024-07-07 16:33:23 发布

阅读量4.7k

点赞数 1

分类专栏： Nuxt.js 文章标签： Nuxt的默认模板 Nuxt的默认布局 layout

本文链接：https://blog.csdn.net/muzidigbig/article/details/84881056

版权

Nuxt.js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

在开发应用时，经常会用到一些公用的元素/在每个页面中都有的元素，比如网页的标题是一样的，每个页面都是一模一样的标题。这时候我们有两种方法，第一种方法是作一个公用的组件出来，第二种方法是修改默认模板。这两种方法各有利弊，比如公用组件更加灵活，但是每次都需要自己手动引入；模板比较方便，但是只能每个页面都引入。

默认模板

Nuxt为我们提供了超简单的默认模板定制方法，只要在根目录下创建一个app.html就可以实现了。现在我们希望每个页面的最上边都加入”My is Nuxt Default Module”这几个字，我们就可以使用默认模板来完成。

<!DOCTYPE html>
<html lang="en">
<head>
    {{HEAD}}
</head>
<body>
    <h2>My is Nuxt Default Module</h2>
    {{APP}}
</body>
</html>

这里的{{HEAD}}读取的是nuxt.config.js里的信息，{{APP}}就是我们写的pages文件夹下的主体页面了。需要注意的是HEAD和APP都需要大写。

这里还有一个小坑需要注意，就是如果你建立了默认模板后，记得要重启服务器 npm run dev。
但是默认布局不用重启服务器。

默认布局/视图layout

和默认模板类似的功能还有默认布局，但是从名字上你就可以看出来，默认布局主要针对页面的统一布局使用。它在根目录的layouts/default.vue。需要注意的是在默认布局里不要加入头部信息，只是关于<template>标签下的内容统一订制。

还是上边的需求，我们在每个页面的最顶部放入“I hava a dream.”这几个字，看一下在默认布局里的实现。

<template>
  <div>
    <p>I hava a dream.</p>
    <nuxt/>
  </div>
</template>

这里的<nuxt />就相当于页面的路由占位符;你也可以把一些通用样式放入这个默认布局里，但是个人不建议这样写，会增加页面的复杂程度。

在layout 里面写好default.vue 可以认为这是根组件的模板了，所有的组件都加在里面，但是有些页面可能不一样，就可以使用个性化定制页面。

举个例子 layouts/template.vue:

<template>
  <div>
    <div>这个页面不需要导航栏</div>
    <nuxt />
  </div>
</template>

在 pages/detail.vue 里，可以指定页面组件使用 template 布局。

<script>
   export default {
      // layout属性：指定layout中的页面布局
      layout: 'template'
   }
</script>

Nuxt pages下不同的页面对应layout下的页面布局

有时候我们pages中不同的页面需要不同的个性化布局这时候layout就起作用了

layouts 根目录下的所有文件都属于个性化布局文件，可以在页面组件中利用 layout 属性来引用。

pages文件下组件的layout属性值为layout文件下的所对应的布局组件的名称

请确保在布局文件里面增加 <nuxt/> 组件用于显示页面非布局内容。

举个例子

1.layouts/custom_layout.vue:

<template>
    <div>
        <div class="title">这里是自定义也页面的头部(布局)</div>
        <!-- nuxt可以理解为所对应的.vue页面的内容 -->
        <nuxt/>
        <div class="footer">这里是自定义页面的底部(布局)</div>
    </div>
</template>
<script>
export default {
    
}
</script>
<style scoped>
.title,.footer{
    padding: 20px;
}
.title{
    background: pink;
}
.footer{
    background: yellow
}
</style>

2.在 pages/custom.vue 里，可以指定页面组件使用 blog 布局。

<template>
    <div>
        <h2>我是自定义页面的内容</h2>
    </div>
</template>
<script>
export default {
    // 下面的两种方式都可以；layout属性其实是将这个vue页面跟布局vue进行关联的属性，layout的值为layout文件夹下所对应布局的名字
    // layout: 'custom_layout',
    layout: function(context){
        return 'custom_layout'
    }
}
</script>
<style scoped>
 
</style>

效果：

总结：要区分默认模板和默认布局的区别，模板可以订制头部信息，包括IE版本的判断；布局订制<template>里个性页面布局。

muzidigbig

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Nuxt的默认模板和默认布局（视图layout）---04

在开发应用时，经常会用到一些公用的元素/在每个页面中都有的元素，比如网页的标题是一样的，每个页面都是一模一样的标题。这时候我们有两种方法，第一种方法是作一个公用的组件出来，第二种方法是修改默认模板。这两种方法各有利弊，比如公用组件更加灵活，但是每次都需要自己手动引入；模板比较方便，但是只能每个页面都引入。默认模板Nuxt为我们提供了超简单的默认模板定制方法，只要在根目录下创建一个app.h...
复制链接

扫一扫

专栏目录