CODEWITHSUNDEEP
vue.jsvue-router
Cruze
Cruze

Reputation: 220

How to add a outside layout to vue component

I wanted to change my vue route from /dashboards/dashboard to just /dashboard. How to achieve these using this code

import Layout2 from '@/layout/Layout2'

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

I have tried putting these code but how can I add the layout2 if the component is already added?

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

Upvotes: 0

Views: 60

Answers (1)

ittus
ittus

Reputation: 22403

If 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.

You can do

import Layout2 from '@/layout/Layout2'

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

Upvotes: 1

Related Questions