Nuxt pages 아래 다른 페이지 는 layot 아래 의 페이지 레이아웃 작업 에 대응 합 니 다.
layouts 루트 디 렉 터 리 에 있 는 모든 파일 은 개성 화 된 레이아웃 파일 로 페이지 구성 요소 에서 layot 속성 을 이용 하여 참조 할 수 있 습 니 다.
pages 파일 아래 구성 요소 의 layot 속성 값 은 layot 파일 에 대응 하 는 레이아웃 구성 요소 의 이름 입 니 다.
레이아웃 파일 에
예 를 들다
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>
<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 아래 의 서로 다른 페이지 가 layot 아래 의 페이지 레이아웃 작업 에 대응 하 는 것 은 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.여러분 에 게 참고 가 되 고 많은 응원 을 바 랍 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Nuxt 구성 Element-UI 필요에 따라 도입Nuxt가create-nuxt-app을 사용하여 프로젝트를 만들 때 Element-UI를 기본 구성 요소 라이브러리로 선택하면 Nuxt가 Element-UI의 필요에 따라 설정을 도입하지 않고 스스로 설정해야 합니다...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
