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


Posted in Javascript onNovember 05, 2020

有时候我们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>

效果:

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

补充知识:Nuxt.js之一个页面把全部css样式都加载进来的Bug解决办法

逐一排查是安装包出了问题,npm i 和cnpm i不能通用;

解决办法:

node_modules文件删除,重新安装.如果没安装镜像就用npm i;

安装了镜像就用cnpm i ;

如果还不能解决,怕是nuxt包你用了last自动安装最新版本的,这个千万别用last,一定要稳定版哈,包之间有关联的,不要随意升级!

以上这篇Nuxt pages下不同的页面对应layout下的页面布局操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
情人节专属 纯js脚本1k大小的3D玫瑰效果
Feb 11 Javascript
深入理解JavaScript中的传值与传引用
Dec 09 Javascript
Javascript中引用示例介绍
Feb 21 Javascript
Jquery easyUI 更新行示例
Mar 06 Javascript
javascript二维数组转置实例
Jan 22 Javascript
JavaScript使用yield模拟多线程的方法
Mar 19 Javascript
js生成word中图片处理方法
Jan 06 Javascript
基于vue-resource jsonp跨域问题的解决方法
Feb 03 Javascript
微信小程序Page中data数据操作和函数调用方法
May 08 Javascript
JS左右无缝轮播功能完整实例
May 16 Javascript
vue路由拦截器和请求拦截器知识点总结
Nov 08 Javascript
如何在CocosCreator里画个炫酷的雷达图
Apr 16 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
Nov 05 #Javascript
nuxt引入组件和公共样式的操作
Nov 05 #Javascript
jQuery列表动态增加和删除的实现方法
Nov 05 #jQuery
nuxt 实现在其它js文件中使用store的方式
Nov 05 #Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
Nov 05 #Javascript
vue实现点击出现操作弹出框的示例
Nov 05 #Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
Nov 05 #Javascript
You might like
咖啡的化学
2021/03/03 咖啡文化
destoon会员注册提示“数据校验失败(2)”解决方法
2014/06/21 PHP
PHP中使用匿名函数操作数据库的例子
2014/11/17 PHP
php多线程实现方法及用法实例详解
2015/10/26 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
CL vs ForZe BO5 第五场 2.13
2021/03/10 DOTA
jqeury eval将字符串转换json的方法
2011/01/20 Javascript
jquery索引在使用中的一些困惑
2013/10/24 Javascript
给事件响应函数传参数的四种方式小结
2013/12/05 Javascript
javascript中的作用域和上下文使用简要概述
2013/12/05 Javascript
js Dialog 去掉右上角的X关闭功能
2014/04/23 Javascript
使用iojs的jsdom库实现同步系统时间
2015/04/20 Javascript
JS实现可点击展开与关闭的左侧广告代码
2015/09/02 Javascript
JavaScript中Function函数与Object对象的关系
2015/12/17 Javascript
Javascript中神奇的this
2016/01/20 Javascript
深入浅析JavaScript函数前面的加号和叹号
2016/07/09 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
2016/07/15 Javascript
node.js学习之base64编码解码
2016/10/21 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
2017/05/08 jQuery
vue实现点击图片放大效果
2017/08/15 Javascript
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
windows下更新npm和node的方法
2017/11/30 Javascript
js中document.write和document.writeln的区别
2018/03/11 Javascript
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
Layui多选只有最后一个值的解决方法
2019/09/02 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
2019/09/23 Javascript
JavaScript实现移动端弹窗后禁止滚动
2020/05/25 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
2020/05/28 Javascript
Python中类型检查的详细介绍
2017/02/13 Python
pygame加载中文名mp3文件出现error
2017/03/31 Python
利用Python将每日一句定时推送至微信的实现方法
2018/08/13 Python
python xlwt如何设置单元格的自定义背景颜色
2019/09/03 Python
django中media媒体路径设置的步骤
2019/11/15 Python
Pycharm 2020.1 版配置优化的详细教程
2020/08/07 Python
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
速卖通欧盟:Aliexpress EU
2020/08/19 全球购物