Vue 路由器嵌套路由与父级一起呈现

Question

所以我尝试使用 Vue 路由器嵌套我的路由，但没有成功。

{
    path: '/admin',
    name: 'Admin', component: () => import('pages/Admin'),
    children:[
      { path: 'stock', name: 'Stock', component: ()=> import('pages/Stock')},
    ]},

没有用所以我发现我需要放在父组件里面。现在它可以工作但是如果我加载页面 /admin/stock 它会呈现两个组件。一个在其他之上。

为什么仍然显示父组件（/admin页面）？

顺便说一句，当我在没有嵌套路由的情况下做同样的事情时，它工作得非常好，组件单独呈现（下面的代码片段）。

{
    path: '/admin',
    name: 'Admin', component: () => import('pages/Admin'),
    children:[
     //no nested route
    ]},
  { path: 'admin/stock', name: 'Stock', component: ()=> import('../pages/Stock')},

感谢您的帮助

Answer 1

您应该在“Admin”组件中包含一个 router-view 标签。管理组件将作为“布局”工作，它将呈现与当前路由对应的子组件。

例如

管理组件：

<template>
    <div>
        <div>
            Content present in all childrens
        </div>
        <router-view>
            <div>"Admin" page content</div>
        </router-view>
    </div>
</template>

库存成分：

<template>
    <div>
        "Stock" content
    </div>
</template>

当你进入/admin 它将呈现：

    <div>
        <div>
            Content present in all childrens
        </div>
        <div>"Admin" page content</div>
    </div>

当您访问/admin/stock 它将呈现：

    <div>
        <div>
            Content present in all childrens
        </div>
        <div>"Stock" content</div>
    </div>

这里有一个更好的例子 https://router.vuejs.org/guide/essentials/nested-routes.html

如果您不需要重用“Admin”组件布局，您可以使用您在第二种情况中提到的路由，而无需嵌套它们

Vue 路由器嵌套路由与父级一起呈现

Vue router nested routes renders with parent

javascript

vue.js

vue-router

vue-component