利用component组件和is属性来控制页面里面展示内容

比如后台系统要实现普通用户跳转普通页面，而管理员用户跳转管理页面的这种情况就可以使用这种方式来解决

一、使用方法也简单

1
2
3
4
5
6
7
 <!-- 结构就是这样-->
<template>
  <div class="dashboard-container">
    <!-- 通过component标签加上is属性动态切换组件-->
    <component :is="currentRole" />
  </div>
</template>

然后引入不同的组件

1
2
3
4
5
6
7
8
9
10
// 管理员页面
import adminDashboard from './admin'
// 普通页面
import editorDashboard from './editor'

export default {
 // 同一注入一下
  components: { adminDashboard, editorDashboard },
}

加载页面的时候判断权限然后重新赋值

1
2
3
4
5
6
7
created() {
  // 判断是不是管理员 然后通过component的is属性跳转不同的页面
  if (!this.roles.includes('admin')) {
    this.currentRole = 'editorDashboard'
  }
}