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 相关文章推荐
JavaScript入门教程(2) JS基础知识
Jan 31 Javascript
JavaScript表达式:URL 协议介绍
Mar 10 Javascript
js简单实现让文本框内容逐个字的显示出来
Oct 22 Javascript
JS辨别访问浏览器判断是android还是ios系统
Aug 19 Javascript
javascript合并表格单元格实例代码
Jan 03 Javascript
多种JQuery循环滚动文字图片效果代码
Jun 23 Javascript
JQuery日期插件datepicker的使用方法
Mar 03 Javascript
深入学习js瀑布流布局
Oct 14 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
Dec 15 Javascript
JavaScript如何对图片进行黑白化
Apr 10 Javascript
Typescript的三种运行方式(小结)
Sep 18 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
Sep 25 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
GD输出汉字的函数的分析
2006/10/09 PHP
php实现session自定义会话处理器的方法
2015/01/27 PHP
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
Javascript 匿名函数及其代码模式原理
2010/03/19 Javascript
返回对象在当前级别中是第几个元素的实现代码
2011/01/20 Javascript
电子商务网站上的常用的js放大镜效果
2011/12/08 Javascript
jQuery中siblings()方法用法实例
2015/01/08 Javascript
比较常见的javascript中定义函数的区别
2015/11/09 Javascript
AngularJS入门教程之AngularJS表达式
2016/04/18 Javascript
Jquery ajax请求导出Excel表格的实现代码
2016/06/08 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
2018/09/18 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
2019/04/09 Javascript
Vue基础学习之项目整合及优化
2019/06/02 Javascript
详解Nuxt.js 实战集锦
2019/11/19 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
2020/08/28 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
Python应用03 使用PyQT制作视频播放器实例
2016/12/07 Python
python实现猜数字小游戏
2020/03/24 Python
Python运维开发之psutil库的使用详解
2018/10/18 Python
在cmder下安装ipython以及环境的搭建
2018/10/19 Python
使用Python实现微信提醒备忘录功能
2018/12/04 Python
python生成器与迭代器详解
2019/01/01 Python
Python下简易的单例模式详解
2019/04/08 Python
softmax及python实现过程解析
2019/09/30 Python
python列表推导式操作解析
2019/11/26 Python
Python利用多线程同步锁实现多窗口订票系统(推荐)
2019/12/22 Python
Python模拟FTP文件服务器的操作方法
2020/02/18 Python
Python实现LR1文法的完整实例代码
2020/10/25 Python
百联网上商城:i百联
2017/01/28 全球购物
FC-Moto英国:欧洲最大的摩托车服装和头盔商店之一
2019/08/25 全球购物
J2ee常用的设计模式?说明工厂模式
2015/05/21 面试题
致1500米运动员广播稿
2014/02/07 职场文书
python实现socket简单通信的示例代码
2021/04/13 Python
windows下快速安装nginx并配置开机自启动的方法
2021/05/11 Servers
PO模式在selenium自动化测试框架的优势
2022/03/20 Python
使用Ajax实现进度条的绘制
2022/04/07 Javascript