子路由未显示在 vuejs 中答案

【问题标题】：Children route is not shown in vuejs子路由未显示在 vuejs 中
【发布时间】：2020-04-03 02:45:34
【问题描述】：

vuejs 中不显示子路由。

访问子路由时，会显示母路由。我做错了什么？

{
    path: '/portaria',
    name: 'portaria',
    component: Portaria,
    meta: {
        auth: true,
        layout: layouts.navTop,
        tipo: 'portaria'
    },
    children: [
        {   path: 'create',
            name: 'create',
            component: PortariaCreate,
            meta: {
                auth: true,
                layout: layouts.navTop
            }
        }
    ]
}

【问题讨论】：

母路由或Portaria组件将在访问任何子路由时始终显示，即无论您访问/portaria还是/portaria/create。在这两种情况下你都会看到Portaria，在子路由中你会看到PortariaCreate和Portaria。尝试修改 child 的样式，以便您知道它正在渲染。目前它可能与父组件重叠。
谢谢。即使访问 /portaria/create 子组件也不会呈现。只渲染了母路由。
控制台是否出现任何错误？
没有。没有错误...
你能添加更多完整的routes文件的代码吗？

标签： javascript vue.js vuejs2 vue-router

【解决方案1】：

当它在儿童内部时，您缺少 /。是{path:'create'...，应该是{path: '/create'...inside children。

像这样：

const router = new Router({
    mode: 'history',
    //base: '/sub-path/',
    routes: [
        {
            path: '/',
            alias: '/dashboard',
            name: 'dashboard',
            component: Dashboard,
            meta: {
                auth: true,
                layout: layouts.navLeft,
                searchable: true
            }
        },
        {

            path: '/portaria',
            name: 'portaria',
            component: Portaria,
            meta: {
                auth: true,
                layout: layouts.navTop,
                tipo: 'portaria'
      },
      children: [
                {   path: '/create', //added / here
                    name: 'create',
                    component: PortariaCreate,
                    meta: {
                        auth: true,
                        layout: layouts.navTop
                    }
                }
            ],
        }
    ]
})

如果上述方法不起作用，请尝试更改 PortrariaCreate 的布局。如果这不起作用，直接把它作为到 Portaria 的同级路由，看看它在那里工作

【讨论】：

【解决方案2】：

您的Portaria 组件必须包含它自己的<router-view>，子路由器才能在其中显示。

嵌套路由必须具有匹配的嵌套路由器视图。

App.vue
 - <router-view>
 Portaria.vue
   - <router-view>

如果您不想在视图中查看视图，那么您应该扁平化您的路由器路径。


const router = new Router({
  mode: 'history',
    //base: '/sub-path/',
    routes: [
      {
        path: '/',
        alias: '/dashboard',
        name: 'dashboard',
        component: Dashboard,
        meta: {
          auth: true,
          layout: layouts.navLeft,
          searchable: true
        }
      },
      {
        path: '/portaria',
        name: 'portaria',
        component: Portaria,
        meta: {
          auth: true,
          layout: layouts.navTop,
          tipo: 'portaria'
      },
      {   
        path: '/portaria/create',
        name: 'portaria-create',
        component: PortariaCreate,
        meta: {
          auth: true,
          layout: layouts.navTop
        }
      }
    ]
})

【讨论】：