Nuxtpages下不同的页面对应layout下的页面布局操作_nuxt的layout资源-CSDN文库

88 浏览量 2021-01-18 19:14:22 上传评论收藏 63KB PDF 举报

资源推荐

资源详情

资源评论

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

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

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

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

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

举个例子

1.layouts/custom_layout.vue:

<template>

<div>

<div class="title">这里是自定义也页面的头部(布局)</div>

<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>

效果：

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

内容反馈

weixin_38628243

粉丝: 1
资源: 908

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip