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