Nuxt 내장 경로 nuxt-child 구성 요소 용법(부자 페이지 구성 요소 의 전송 값)
5458 단어 Nuxt경로nuxt-child
홈 페이지 의 api 가 홈 페이지 를 실현 한 사례 를 보면 부모 페이지 에 부모 페이지 의 내용 만 표시 할 수 있 습 니 다.기본적으로
자신의 사례 코드:
pages/parent.vue
<template>
<div>
<h2> </h2>
<ul>
<!-- ， vue.js -->
<li><nuxt-link to='/parent/child'>child</nuxt-link></li>
<li><nuxt-link to='/parent/child2'>child2</nuxt-link></li>
</ul>
<hr>
<div class="box">
<p> </p>
<!-- <nuxt-child> ； -->
<nuxt-child keep-alive :foobar="123"></nuxt-child>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
.box{
margin-top: 20px;
padding: 20px;
border: 2px solid pink;
border-radius: 5px;
}
</style>
<template>
<div>
<h2> index.vue</h2>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
<template>
<div>
<h2> child</h2>
<p>foobar：{{foobar}}</p>
</div>
</template>
<script>
export default {
props:['foobar']
}
</script>
<style scoped>
</style>
<template>
<div>
<h2> child2</h2>
<p>foobar:{{foobar}}</p>
</div>
</template>
<script>
export default {
props: ['foobar']
}
</script>
<style scoped>
</style>
nuxt 2 급 경로
반나절 의 시간 을 들 여 마침내 페이지 의 2 급 경 로 를 설정 하 였 다.
내 목록 부터 봐.
로그 인 페이지 가 없 으 면 포 함 된 경로 문 제 를 고려 하지 않 아 도 됩 니 다.주요 menu 점프 와
자,핵심 으로 들 어 갑 니 다.
상황,미들웨어/authenticated.js
// ， ， 。
export default function ({
store,
redirect
}) {
if (!store.state.user) {
return redirect('/login')
}
}pages/index.vue 아래
<template>
<div style="height:100%;">
</div>
</template>
<script>
export default {
created () {
console.log(this.$router)
this.$router.push('/login') //
}
}
</script>
<template>
<div style="height:100%;">
<el-container style="height:100%">
<el-header class="theme-bg-color">
<my-head />
</el-header>
<el-container style="height:100%;">
<my-side />
<el-main>
<NuxtChild :key="key"/>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
import MySide from '~/components/MySide.vue'
import MyHead from '~/components/MyHead.vue'
export default {
components: {
MySide,
MyHead
},
computed: {
key() {
return this.$route.name !== undefined? this.$route.name +new Date(): this.$route +new Date()
}
}
}
</script>
export default {
name: 'users'
}
export default {
name: 'users-ditch'
}요약,내장 경로(2 급 경로 쓰기)
1.페이지 에 user.vue 가 있 고 폴 더 에 도 같은 이름 의 user 가 있어 야 합 니 다.
둘째,index.vue 페이지 가 있 는 것 이 좋 습 니 다.
3.name 형식.
원본 주소:
https://github.com/besswang/rj-payadmin-nuxt
이상 의 이 Nuxt 플러그 인 은 nuxt-child 구성 요소 의 용법(부자 페이지 구성 요소 의 전송 값)으로 여러분 에 게 공 유 된 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 께 서 저 희 를 많이 사랑 해 주 셨 으 면 합 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 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에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
