vue组件如何添加外部布局

Question

我想将我的 vue 路由从 /dashboards/dashboard 更改为 /dashboard。如何使用此代码实现这些

import Layout2 from '@/layout/Layout2'

export default [
{
    path: '/dashboards',
    component: Layout2,
    children: [
    {
        path: 'dashboard',
        name: 'dashboard',
        component: () => import('@/components/dashboards/Dashboard')
    }
    ]
  }
]

我试过放置这些代码，但是如果组件已经添加，我该如何添加 layout2？

export default [
  {
    path: '/dashboard',
    name: 'dashboard',
    component: () => import('@/components/dashboards/Dashboard')
  }
]

Answer 1

如果vue-router document

Note that nested paths that start with / will be treated as a root path. This allows you to leverage the component nesting without having to use a nested URL.

你可以做到

import Layout2 from '@/layout/Layout2'

export default [
{
    path: '/',
    component: Layout2,
    children: [
    {
        path: 'dashboard',
        name: 'dashboard',
        component: () => import('@/components/dashboards/Dashboard')
    }
    ]
  }
]

vue组件如何添加外部布局

How to add a outside layout to vue component

vue.js

vue-router