vue实现同一个项目不同布局

需求场景：开放式网站，用来展示文章或者一些课程。用户也可自己上传，所以一个项目相当于涉及到前台和后台。前台用来展示，后台用来供用户创作。

这就会设计到两种不同的布局。

1.首先，我们先需要把两种布局搭建好，也就是layout文件夹下建两个vue文件，我这里起名default和teacher

2.然后在main.js中全局挂载

import DefaultLayout from './layout/default' 
import TeacherLayout from './layout/teacher' 
Vue.component('default-layout', DefaultLayout) 
Vue.component('teacher-layout', TeacherLayout)

3.在route.js中引用路由的时候设置布局

//default也就是默认组件可以不用写，另一种组件写 
{
    path: "/", 
    name: "home", 
    component: () => import("@/views/home"), 
    meta: { title: "首页" } 
}, 
{ 
path: "/teacher", 
name: "teacher", 
component: () => import("@/views/teacher"),
meta: { title: "后台管理",layout:'teacher' } 
},

4.最后在App.vue中

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

<script>
export default {
  name: 'App',
  data(){
    return{
      default_layout: 'default',
    }
  },
  computed:{
    layout(){
      return (this.$route.meta.layout || this.default_layout) + '-layout'
    }
  }
}
</script>

<style>
#app {
  font-family: MicrosoftYaHei;
}
</style>

这样我们就实现了两种不同布局自由切换