实现目标：

实现一个系统里多个layout布局，在layout1布局，上左右的布局里，在左边side切换菜单，切到某菜单时，系统的整个布局结构变成上下布局；

实现方案：

1、App.vue

通过在App.vue里运用 <component>组件的is属性，判断要挂载的布局组件

src\App.vue

<template>
  <div id="app">
    <component :is="layout" />
  </div>
</template>

<script>
const _import = file => () => import('@/views/layout/' + file + '.vue').then(m => m.default || m)
export default {
  name: 'App',
  data(){
    return{
      default_layout:'layout1'

    }
  },
  computed:{
    layout(){
      const name=this.$route.meta.layout || this.default_layout
      return _import(name) 
    }
  }
}
</script>

2、router

在route的meta里设置layout

src\router\index.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'system',
      meta:{
        layout:'layout1'
      },
      // redirect:'system/menu1',  
    },
    
    // layout1布局
    {
      path: '/system',
      name: 'system',
      meta:{
        layout:'layout1'
      },
      component: ()=> import('@/views/page/system/index'),
      children:[
        {
          path: 'menu1',
          name: 'system.menu1',
          meta:{
            layout:'layout1'
          },
          component: ()=> import('@/views/page/system/menu1'),
        },

        {
          path: 'menu2',
          name: 'system.menu2',
          meta:{
            layout:'layout1'
          },
          component: ()=> import('@/views/page/system/menu2'),
        }

      ]
    },

    // layout2布局
    {
      path: '/admin',
      name: 'admin',
      meta:{
        layout:'layout2'
      },
      component: ()=> import('@/views/page/admin/index'),
      children:[
        {
          path: 'menu1',
          name: 'admin.menu1',
          meta:{
            layout:'layout2'
          },
          component: ()=> import('@/views/page/admin/menu1'),
        },
      ]
    },
  ]
})

image.png

菜单3：

image.png