使用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>

原文地址：https://www.cnblogs.com/star-meteor/p/12708185.html