使用is动态切换组件

<template>

  <div class="dashboard-container">

    <!-- 根据角色，切换组件 -->

    <component :is="currentRole" />

  </div>

</template>

<script>

import { mapGetters } from 'vuex'

import adminDashboard from './admin' // 管理者组件

import editorDashboard from './editor' // 编辑者组件

export default {

  name: 'Dashboard',

  components: { adminDashboard, editorDashboard },

  data() {

    return {

      currentRole: 'adminDashboard'

    }

  },

  computed: {

    // 在组件中引入mapGetters就是将vuex中的数据映射到组件的计算属性当中

    ...mapGetters([

      'roles'

    ])

  },

  created() {

    if (!this.roles.includes('admin')) {

      this.currentRole = 'editorDashboard'

    }

  }

}

</script>