vue实现layout更换

Vue 实现 Layout 更换

在 Vue 中实现动态更换 Layout 可以通过多种方式实现，以下是几种常见的方法：

使用动态组件

通过 Vue 的动态组件 <component :is="currentLayout"> 可以实现 Layout 的切换。定义一个 Layout 组件，根据条件动态切换不同的 Layout。

<template>
  <component :is="currentLayout">
    <router-view />
  </component>
</template>

<script>
import DefaultLayout from './layouts/DefaultLayout.vue'
import AdminLayout from './layouts/AdminLayout.vue'

export default {
  data() {
    return {
      currentLayout: 'DefaultLayout'
    }
  },
  components: {
    DefaultLayout,
    AdminLayout
  },
  watch: {
    $route(to) {
      this.currentLayout = to.meta.layout || 'DefaultLayout'
    }
  }
}
</script>

使用路由元信息

在路由配置中定义 meta 字段，指定每个路由对应的 Layout，然后在根组件或 App.vue 中根据路由动态切换 Layout。

// router.js
const routes = [
  {
    path: '/',
    component: Home,
    meta: { layout: 'DefaultLayout' }
  },
  {
    path: '/admin',
    component: Admin,
    meta: { layout: 'AdminLayout' }
  }
]

<template>
  <component :is="$route.meta.layout || 'DefaultLayout'">
    <router-view />
  </component>
</template>

<script>
import DefaultLayout from './layouts/DefaultLayout.vue'
import AdminLayout from './layouts/AdminLayout.vue'

export default {
  components: {
    DefaultLayout,
    AdminLayout
  }
}
</script>

使用插槽

通过插槽的方式实现 Layout 的切换，定义多个 Layout 组件，并在需要时动态切换。

<template>
  <DefaultLayout v-if="layout === 'default'">
    <router-view />
  </DefaultLayout>
  <AdminLayout v-else-if="layout === 'admin'">
    <router-view />
  </AdminLayout>
</template>

<script>
import DefaultLayout from './layouts/DefaultLayout.vue'
import AdminLayout from './layouts/AdminLayout.vue'

export default {
  data() {
    return {
      layout: 'default'
    }
  },
  components: {
    DefaultLayout,
    AdminLayout
  },
  watch: {
    $route(to) {
      this.layout = to.meta.layout || 'default'
    }
  }
}
</script>

使用 Vuex 管理状态

通过 Vuex 管理当前 Layout 状态，实现全局动态切换。

// store.js
export default new Vuex.Store({
  state: {
    layout: 'DefaultLayout'
  },
  mutations: {
    setLayout(state, layout) {
      state.layout = layout
    }
  }
})

<template>
  <component :is="layout">
    <router-view />
  </component>
</template>

<script>
import { mapState } from 'vuex'
import DefaultLayout from './layouts/DefaultLayout.vue'
import AdminLayout from './layouts/AdminLayout.vue'

export default {
  computed: {
    ...mapState(['layout'])
  },
  components: {
    DefaultLayout,
    AdminLayout
  },
  watch: {
    $route(to) {
      this.$store.commit('setLayout', to.meta.layout || 'DefaultLayout')
    }
  }
}
</script>

以上方法可以根据项目需求选择适合的方式实现动态 Layout 切换。