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 相关文章推荐
ExtJS 2.0实用简明教程 之获得ExtJS
Apr 29 Javascript
jQuery获取字符串中出现最多的数
Feb 22 Javascript
javascript数字验证的实例代码(推荐)
Aug 20 Javascript
响应式表格之固定表头的简单实现
Aug 26 Javascript
用js写的一个路由(简单实例)
Sep 24 Javascript
从零学习node.js之express入门(六)
Feb 25 Javascript
vue 使用ref 让父组件调用子组件的方法
Feb 08 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
Mar 28 Javascript
jQuery 选择器用法基础入门示例
Jan 04 jQuery
js实现特别简单的钟表效果
Sep 14 Javascript
如何使用 vue-cli 创建模板项目
Nov 19 Vue.js
Html5生成验证码的示例代码
May 10 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
PHP中SimpleXML函数用法分析
2014/11/26 PHP
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
JavaScript 学习笔记(六)
2009/12/31 Javascript
javascript dom 基本操作小结
2010/04/11 Javascript
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
JavaScript中OnLoad几种使用方法
2012/12/15 Javascript
Javascript查询DBpedia小应用实例学习
2013/03/07 Javascript
jquery中使用循环下拉菜单示例代码
2014/09/24 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
2020/03/30 Javascript
Angular表单验证实例详解
2016/10/20 Javascript
微信小程序之ES6与事项助手的功能实现
2016/11/30 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
2017/04/19 Javascript
angularjs $http实现form表单提交示例
2017/06/09 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
2017/06/12 Javascript
JavaScript箭头函数_动力节点Java学院整理
2017/06/28 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
2017/09/07 Javascript
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
2018/09/29 Javascript
Vuex的基本概念、项目搭建以及入坑点
2018/11/04 Javascript
详解Howler.js Web音频播放终极解决方案
2020/08/23 Javascript
[01:08:32]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第二场 1月18日
2021/03/11 DOTA
numpy数组广播的机制
2019/07/12 Python
微信小程序python用户认证的实现
2019/07/29 Python
Python:合并两个numpy矩阵的实现
2019/12/02 Python
Linux不知道文件后缀名怎么判断文件类型
2014/08/21 面试题
音乐专业自荐信
2014/02/07 职场文书
询价采购方案
2014/06/09 职场文书
温馨提示标语
2014/06/26 职场文书
王兆力在市委党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
2014五年级班主任工作总结
2014/12/05 职场文书
2015羊年春节慰问信
2015/02/14 职场文书
民主生活会主持词
2015/07/01 职场文书
《认识钟表》教学反思
2016/02/16 职场文书
学术会议开幕词
2016/03/03 职场文书
Elasticsearch 配置详解
2022/04/19 Java/Android
Python保存并浏览用户的历史记录
2022/04/29 Python