Nuxt - 如何在没有父内容的情况下渲染子路由答案

【问题标题】：Nuxt - How to Render Child Route without Parent ContentNuxt - 如何在没有父内容的情况下渲染子路由
【发布时间】：2021-06-30 23:42:54
【问题描述】：

我想知道如何在不显示父页面的情况下显示子页面的内容。

我认为这很简单，但我没有找到有关如何执行此操作的任何信息。我当前的输出有页面“app/parent”为父级呈现一些内容，“app/parent/child-A”显示来自父级的相同内容，底部是子级的内容。我想只显示孩子的内容，同时保持 'app/parent/child-A' URL。

我怀疑我可能会错误地接近父/子功能，并且对于我正在尝试做的事情有一些更好的选择。

【问题讨论】：

确实可能有更好的方法来处理这个问题。你研究过布局吗？ nuxtjs.org/docs/2.x/concepts/views#layouts 您也可以直接在pages 目录中使用child-a.vue，而不是将其嵌套到父文件夹中。

标签： javascript nuxt.js

【解决方案1】：

你可以使用v-if

router.js

....
const page = path => () => import(`./pages/${path}.vue`).then(m => m.default || m);
const routers = [
   {
        path: '/posts',
        component: page('posts/layout'),
        props: true,
        children: [
            {
                path: '',
                name: 'posts/index',
                component: page('posts/index'),
                props: true
            },
            {
                path: ':id',
                name: 'posts/show',
                component: page('posts/show'),
                props: true
            }
        ]
   },
   ...
];
...

pages/posts/layout.vue

<template>
    <main>
        <h1 v-if="$router.name !== 'posts/index'">from parent layout</h1>
        <nuxt/>
    </main>
</template>

【讨论】：