vue实现多布局系统、多layout实现方案

实现目标:

实现一个系统里多个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
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容