使用 nuxt 开发网站 之 如何展示子页面?

这里是我自己踩过的一个坑,也许是学术不精,没有在一开始领悟到子页面如何展示,这里放一个小栗子,方便以后遇见时查看:

小栗子:

    • 新闻列表路由 : your_domain/en/news;新闻详情路由:your_domain/en/news/${id} 
    • pages中:
    • pages/news 
1 <script>
2 import News from './news/index'
3 export default News
4 </script>

pages/news/_id.vue

<script>
 import NewsDetail from '../_lang/news/_id'
 export default NewsDetail
</script>

pages/news/index.vue

1 <script>
2  import NewsIndex from '../_lang/news/index'
3  export default NewsIndex
4 </script>
  • pages/_lang 中:
  • pages/_lang/news.vue 用于子页面的展示
    <template>
        <div>
            <NuxtChild :key="$route.params.id" />
        </div>
    </template>

   pages/_lang/news/_id.vue 这里才是真正的新闻详情页面内容

   pages/_lang/news/index.vue  这里才是真正的新闻列表页内容

作者:胡倩倩0903
本文版权归作者和博客园共有,欢迎转载,但必须给出原文链接,并保留此段声明,否则保留追究法律责任的权利。
原文地址:https://www.cnblogs.com/kitty-blog/p/14411792.html