根据用户的权限不同,页面上要显示不同的内容,然后我就哼哧哼哧的将不同权限对应的组件写了出来,然后再通过v-if来判断要显示哪个组件,就有了下面的代码
可以用动态组件优化
<template>
<div class="info">
<component :is="roleComponent" v-if="roleComponent" />
</div>
</template>
<script>
import AdminInfo from './admin-info'
import BookkeeperInfo from './bookkeeper-info'
import HrInfo from './hr-info'
import UserInfo from './user-info'
export default {
components: {
AdminInfo,
BookkeeperInfo,
HrInfo,
UserInfo
},
data() {
return {
roleComponents: {
admin: AdminInfo,
bookkeeper: BookkeeperInfo,
hr: HrInfo,
user: UserInfo
},
role: 'user',
roleComponent: undefined
}
},
created() {
const { role, roleComponents } = this
this.roleComponent = roleComponents[role]
}
}
</script>