创建内嵌子路由，需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。
这里在pages里新建一个fanil.vue、fanil文件夹
fanil.vue源码
<template> <div class="container"> <p>Final Page</p> <ul> <li> <NuxtLink to="/"> Go to /home </NuxtLink> </li> <li> <NuxtLink to="/fanil"> Go to /index </NuxtLink> </li> <li> <NuxtLink to="/fanil/child"> Go to /child </NuxtLink> </li> <li> <NuxtLink to="/fanil/child2"> Go to /child2 </NuxtLink> </li> </ul> <hr> <div class="box"> <p>嵌套子页面内容区</p> <!-- <nuxt-child>标签在父页面组件中相当于是子页面组件的占位符；嵌套中这个不可少 --> <nuxt-child keep-alive :foobar="123"></nuxt-child> </div> </div> </template>
子组件默认页面index.vue(pages/fanil/index）
<template>
<div>
<h2>嵌套子组件中的默认页面index.vue</h2>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>child.vue(pages/fanil/child)
<template>
<div>
<h2>嵌套子组件中的页面child</h2>
<p>foobar：{{foobar}}</p>
</div>
</template>
<script>
export default {
props:['foobar']
}
</script>
<style scoped>
</style>child2.vue(pages/fanil/child2)
<template>
<div>
<h2>嵌套子组件中的页面child2</h2>
<p>foobar：{{foobar}}</p>
</div>
</template>
<script>
export default {
props:['foobar']
}
</script>
<style scoped>
</style>最终效果
本文由 admin 创作，采用 知识共享署名4.0
国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为:2022-08-09 22:49:10