Nuxtネストルーティングnuxt-childコンポーネントの使い方(親子ページコンポーネントの送信値)

<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>

//         ，        ，       。
export default function ({
 store,
 redirect
}) {
 if (!store.state.user) {
 return redirect('/login')
 }
}

<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'
}