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

有时候我们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.js之一个页面把全部css样式都加载进来的Bug解决办法

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

解决办法：

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

安装了镜像就用cnpm i ;

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

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

赞 (0)

相关推荐

  • nuxt 自定义 auth 中间件实现令牌的持久化操作

    核心点就是在process.server下,把之前存在 cookie 中的数据再用store.commit一下 auth.js /* eslint-disable no-unused-vars */ /* eslint-disable no-useless-return */ export const TokenKey = 'Admin-token' /** * 解析服务端拿到的cookie * @param {*} cookie * @param {*} key */ export funct

  • 解决nuxt 自定义全局方法,全局属性,全局变量的问题

    注意 ,这个 在 asyncData 还是不能用的 ,在mounted等其他生命周期里面可以, asyncData 里因为获取不到this他在组件初始化前执行的,如果找到方法我会继续更新到下一篇博客 好现在说步骤,在plugins 文件夹里新增一个 commom.js名字你自己取 commom.js 测试代码 import Vue from 'vue' var comsys= { install(Vue){ Vue.prototype.comsys = { val:function(val){

  • 基于Vue.js+Nuxt开发自定义弹出层组件

    今天给大家分享VPopup 基于Vue.js构建的轻量级移动端弹出框组件,详情如下所示: 一款融合了Vant.NutUI等热门Vue组件库中的Popup弹层.Dialog对话框.Toast提示框.ActionSheet动作面板框.Notify通知框等功能. 快速使用 在main.js中引入组件 // 引入弹窗Popup import Popup from './components/popup' Vue.use(Popup) 支持如下两种 组件式 及 函数式 调用插件. 组件式 <templat

  • Nuxt配置Element-UI按需引入的操作方法

    Nuxt 使用 create-nuxt-app 创建项目时,选择使用 Element-UI 为默认组件库,发现 Nuxt 没有开启 Element-UI 的按需引入配置,需要自行配置. 安装依赖 在 create-nuxt-app 中没有选择 Element-UI 的先安装. npm install element-ui --save 或者 yarn add element-ui Element-UI 开启按需引入,必须安装 babel-plugin-component 插件. npm inst

  • nuxt引入组件和公共样式的操作

    1,引入组件 在components目录创建组件,在页面中引入组件 例如引入公共导航栏 创建组件components/Nav.vue 引入组件layouts/default.vue 2,引入公共样式 assets/css/common.css 在nuxt.config.js中引入 若引入less或者sass: 补充知识:在nuxt项目中使用component组件 编写组件页面 1.在components下新建一个新建组件页面,如下所示 2.新建完成之后初始页面的代码如下所示: 3.下面从elem

  • nuxt 实现在其它js文件中使用store的方式

    前言 在新建的js文件中想用store里面的数据,比如token想在封装的axios里面,请求头里面去使用,亦或者通过app的JS接口获取token并存储在store里面. 我们都知道如何在vue中如何使用. 代码 /* * @Description: * @Author: lxc * @Date: 2019-07-02 16:14:07 * @LastEditTime: 2019-08-14 16:08:19 * @LastEditors: lxc */ // 导出 store 的地方 imp

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

    有时候我们pages中不同的页面需要不同的个性化布局这时候layout就起作用了 layouts 根目录下的所有文件都属于个性化布局文件,可以在页面组件中利用 layout 属性来引用. pages文件下组件的layout属性值为layout文件下的所对应的布局组件的名称 请确保在布局文件里面增加 <nuxt/> 组件用于显示页面非布局内容. 举个例子 1.layouts/custom_layout.vue: <template> <div> <div class

  • 完美解决jsp页面在IE8下文本模式自动为(杂项Quirks)导致页面显示错位

    完美解决jsp页面在IE8下文本模式自动为(杂项Quirks)导致页面显示错位

    最近在修改网站的响应式的页面时,由于都是套样式页面,修改过程都是粘贴复制,导致了一些细节问题在IE8下暴露出来: 遇到的问题就是在在Chrome,火狐页面都正常,唯独在IE8下页面样式显示乱样了,但是本地就显示正常,Tomcat缓存也清楚了,再加上自己也是个小白,周末平静了一天半终于找到问题的源头了,其实解决办法也很简单,如图: 我最初是将小脚本写在<!DOCTYPE html>文档都上方的,但是在IE8浏览文本模式默认就编程了"Quirks"模式,显示不正常,后来改成了写

  • Android 开发中layout下的子文件夹

    如果一个项目内有很多个界面,那么在layout下会有太多的activity***.xml文件,这个时候就需要使用文件夹对这些分别存放了. 当然你可以直接在这里新建文件夹,虽然你可以建立好,实际上这不能直接使用,IDE会报错. 最好的方式是你在项目之初,就规划好项目中有多少个模块,以模块为分界. 然后在 app/build.gradle 文件的 android{} 内添加如下代码,点击 sync now 后IDE 会更新加载一次.也许你还需要重新启动一下IDE. sourceSets { main

  • 微信小程序 flexbox layout快速实现基本布局的解决方案

    问题描述 flexbox layout --弹性盒子布局.弹性盒子可以快速的对小程序进行布局.一般传统的小程序布局方法对内容量少的页面而言很方便,但对页面比较复杂的来讲就很繁琐了.所以使用 flexbox layout 对小程序页面内容进行整体封装布局,这样既方便又快捷.那么如何使用弹性盒子快速实现小程序的基本布局呢? 传统的布局方式对布局目标的实现属性赋值非常的分散,严重依赖内容的大小和页面的结构,这样操作起来非常的麻烦.而弹性盒子就比较灵活.统一,可以对整个页面的布局进行总体把控设置.弹性盒

  • 详解小程序中h5页面onShow实现及跨页面通信方案

    小程序webview的现状 h5页面在小程序中的交互(跳转)场景 h5跳转小程序native页面(如:调用小程序地址选择能力,然后返回对应的地址信息给h5页面) h5跳转己方业务线的h5页面(内部页面交互,方式比较多样) h5跳转其它业务线的h5页面(如:交易流程,相关页面可能有其他业务线提供) 主要痛点 在完成相关操作后, 页面状态需要更新 ,目前常见的更新方式有如下两种: 第一种:通过url传参(如:url中加入__isonshowrefresh=1,告诉webview再次onshow时候刷

  • nuxt.js服务端渲染中axios和proxy代理的配置操作

    需要npm axios? 刚开始,我以为需要像普通的vue SPA开发那样,需要npm axios,这种方式的确可以生效.但在使用时并不方便.尤其是设置代理比较麻烦,而且在asyncData里与在普通methods里使用方式不一样. 后来在nuxt的github上发现了nuxt是默认集成了axios的,所以不需要npm axios,但是需要进行适当的配置. 以上是百度到的,发现老是报错,现在网上的教程完全是在扯淡,npm axios 是不需要安装了,但是 @nuxtjs/axios 要安装啊 第

  • ie9下alert阻挡jsp渲染ie8下没问题

    ie9下jsp渲染可能会受alert的阻挡.ie8下没有问题. 问题描述: 一个jsp,用了JQuery绑定了画面初期化事件($(function()),初期化事件中有alert(), IE8下alert弹出消息对话框的瞬间,jsp页面正常在浏览器下被渲染; 但是IE9下,alert弹出消息对话框瞬间,jsp页面不被渲染,显示个白页,当点击alert中的"OK"后,页面才被渲染. IE9下如何才能达到和IE8下同样的效果? 试了ie9的兼容模式,不起作用.Jsp代码中强制使用ie8解析

  • 用Jquery.load载入页面后样式没了页面混乱的解决方法

    因为开始不懂Jquery,一直想用jquery.load的方法载入新的页面,以实现局部刷新,结果发现载入进来的页面与原来单独的页面不一样,样式没了,后来在网上查了一下,发现了解决办法,这是别人的回答: 是这样的,如果不过滤掉一些内容的话,直接加载,会使页面混乱的,比如新的页面也存在<body>标签,加载进来后,一个页面就会存在两个<body>标签是不规范的的HTML.这个是在jquery.load()函数中规定的.一般加载进来的页面需要自己根据加载的内容的元素重新定义CSS样式和添

  • Android实现联动下拉框二级地市联动下拉框功能

    日常使用软件中,为了方便且规范输入,会使用到下拉框进行输入,如注册时生日选项,购物时的地址输入,都会用到下拉框,今日笔者为了巩固已学的知识,实现了二级联动下拉框用作回顾及分享给求知的新手. 思路/步骤: 在实现联动下拉框之前,我们先对用到的ArrayAdapter和数据的封装作必要的了解,Android 中提供了很多适配器的实现类,其中ArrayAdapter就其中之一.它可以通过泛型来指定要适配的数据类型,然后在构造函数中把要适配的数据传入.如: ArrayAdapter<CharSequen

  • 解决IOS端微信H5页面软键盘弹起后页面下方留白的问题

    前言:微信H5项目,ios端出现了软键盘输完隐藏后页面不会回弹,下方会有一大块留白 最近微信和ios都有版本升级,不知道是哪边升级造成的,但是经过测试,软键盘收起后,再滚动一下页面,下面的留白就会消失.所以只要在输入完毕后模拟一下这个"滚动"的操作,就能解决问题了. 如果是用vue写的: <input type="text" @blur="fixScroll" placeholder="请输入xxx"/> //me

随机推荐