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

Question

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

我认为这很简单，但我没有找到如何做到这一点的信息。我当前的输出有页面“app/parent”为父级呈现一些内容，“app/parent/child-A”显示来自父级的相同内容，子级的内容位于底部。我只想显示子项的内容，同时保留“app/parent/child-A”URL。

我怀疑我可能会错误地处理 nuxt 中的父/子功能，并且对于我想要做的事情有一些更好的选择。

Answer 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
            }
        ]
   },
   ...
];
...

页面/帖子/layout.vue

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

Answer 2

我不确定这是实现这一目标的正确方法，但它对我有用。

假设你有这样的结构

pages/
    root /
    parent/child.vue
    parent.vue
    index.vue

root.vue

<template>
  <div>
   <h1> Root view </h1>
  </div> 
</template>

parent.vue

<template>
  <div>
    <h1> Parent view </h1>
    <NuxtPage/> -> Here it renders child view contents
  </div> 
</template>

现在，如果您想在不嵌套渲染的情况下维护 '/root/parent/child' URL。我们必须再次包含父文件夹作为可选（或）slug，并且该页面应该有自己的 index.vue 文件。

[parentSlug]/index.vue

<template>
  <div>
   //Leave it empty
  </div> 
</template>

现在修改后的页面结构将是

pages/
    root /
    [parentSlug]    
        / child.vue
          index.vue          
    parent/child.vue
    parent.vue
    index.vue