實現(xiàn)目標：
實現(xiàn)一個系統(tǒng)里多個layout布局，在layout1布局夫嗓，上左右的布局里迟螺，在左邊side切換菜單，切到某菜單時舍咖，系統(tǒng)的整個布局結構變成上下布局矩父；
實現(xiàn)方案：
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
