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的各种节点操作实例演示代码
Jun 27 Javascript
jquery在Chrome下获取图片的长宽问题解决
Mar 20 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
Jun 20 Javascript
很棒的Bootstrap选项卡切换效果
Jul 01 Javascript
Vue.js 表单校验插件
Aug 14 Javascript
vuejs动态组件给子组件传递数据的方法详解
Sep 09 Javascript
微信小程序 购物车简单实例
Oct 24 Javascript
Angular中自定义Debounce Click指令防止重复点击
Jul 26 Javascript
脚手架vue-cli工程webpack的作用和特点
Sep 29 Javascript
vue实现一个炫酷的日历组件
Oct 08 Javascript
浅析vue-router实现原理及两种模式
Feb 11 Javascript
js Math数学简单使用操作示例
Mar 13 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
打造计数器DIY三步曲(中)
2006/10/09 PHP
一个图片地址分解程序(用于PHP小偷程序)
2014/08/23 PHP
PHP基于array_unique实现二维数组去重
2020/07/14 PHP
Javascript 陷阱 window全局对象
2008/11/26 Javascript
javascript AOP 实现ajax回调函数使用比较方便
2010/11/20 Javascript
jquery实现带二级菜单的导航示例
2014/04/28 Javascript
跟我学习javascript的prototype原型和原型链
2015/11/18 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
2016/08/08 Javascript
js轮盘抽奖实例分析
2020/04/17 Javascript
微信小程序 实战实例开发流程详细介绍
2017/01/05 Javascript
Vue.js实现移动端短信验证码功能
2017/03/29 Javascript
微信小程序 本地数据存储实例详解
2017/04/13 Javascript
JavaScript转换数据库DateTime字段类型方法
2017/06/27 Javascript
Vue2.0+ElementUI实现表格翻页的实例
2017/10/23 Javascript
JQuery 又谈ajax局部刷新
2017/11/27 jQuery
swiper自定义分页器使用方法详解
2020/09/14 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
JS实现移动端触屏拖拽功能
2018/07/31 Javascript
Python编程之Re模块下的函数介绍
2017/10/28 Python
python 列表输出重复值以及对应的角标方法
2019/06/11 Python
python调用动态链接库的基本过程详解
2019/06/19 Python
python3 map函数和filter函数详解
2019/08/26 Python
Python中的引用和拷贝实例解析
2019/11/14 Python
python+gdal+遥感图像拼接(mosaic)的实例
2020/03/10 Python
Python实现动态循环输出文字功能
2020/05/07 Python
python中setuptools的作用是什么
2020/06/19 Python
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
2021/01/27 HTML / CSS
解决HTML5中滚动到底部的事件问题
2019/08/22 HTML / CSS
彪马荷兰官网:PUMA荷兰
2019/05/08 全球购物
阿迪达斯印尼官方网站:adidas印尼
2020/02/10 全球购物
清洁工岗位职责
2014/01/29 职场文书
企业内部培训方案
2014/02/04 职场文书
无传销社区工作方案
2014/05/13 职场文书
平安家庭事迹材料
2014/12/20 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
学习焦裕禄观后感
2015/06/09 职场文书