拾光°
通过component标签加上is属性动态切换组件
02/16
利用component组件和is属性来控制页面里面展示内容
比如后台系统要实现普通用户跳转普通页面，而管理员用户跳转管理页面的这种情况就可以使用这种方式来解决
一、使用方法也简单
<!-- 结构就是这样-->
<template>
<div class="dashboard-container">
<!-- 通过component标签加上is属性动态切换组件-->
<component :is="currentRole" />
</div>
</template>然后引入不同的组件
// 管理员页面
import adminDashboard from './admin'
// 普通页面
import editorDashboard from './editor'
export default {
// 同一注入一下
components: { adminDashboard, editorDashboard },
}
加载页面的时候判断权限然后重新赋值
created() {
// 判断是不是管理员 然后通过component的is属性跳转不同的页面
if (!this.roles.includes('admin')) {
this.currentRole = 'editorDashboard'
}
}
