第一种

前端将公共部分的路由直接写在前端代码中，其余部分前端开发完成后，将对应路由复制一份给后端根据权限匹配存储在数据库中，用户登录时，从后端数据库中根据用户权限读取对应路由返回给前端，再添加到前端路由中动态渲染上。 这样操作，需要前后端密切配合，而且页面中的操作级权限不能控制；

第二种

在路由的meta属性中增加 roles字段，用来存储可访问当前路由的权限，在路由全局守卫router.beforeEach中进行拦截处理

//路由信息
routes: [
    {
        path: '/login',
        name: 'login',
        meta: {
            roles: ['admin', 'user']
        },
        component: () => import('../components/Login.vue')
    },
    {
        path: 'home',
        name: 'home',
        meta: {
            roles: ['admin']
        },
        component: () => import('../views/Home.vue')
    },
]

//页面控制
//假设角色有两种：admin 和 user
//这里是从后台获取的用户角色
const role = 'user'
//在进入一个页面前会触发 router.beforeEach 事件
router.beforeEach((to, from, next) => {
    if (to.meta.roles.includes(role)) {
        next()
    } else {
        next({path: '/404'})
    }
})

第三种

//定义指令
// 获取用户角色, 接口返回或者cookie中获取
function getRole() {
  return 'admin'
}
 
// 注册一个全局自定义指令 `v-role`
Vue.directive('role', {
  inserted: (el, binding, vnode) => {
    // 从自定义指令中获取当前指令允许的权限
    let roles = binding.value;
 
    // 获取当前用户权限
    let role = getRole();
 
    // 如果没有权限就移除此节点
    if (!roles.includes(role)) {
      el.parentNode.removeChild(el);
    }
  }
})

//使用示例
<template>
  <div>
    <div v-role="['user', 'admin', 'superAdmin']">user</div>
    <div v-role="['admin', 'superAdmin']">admin</div>
    <div v-role="['superAdmin']">superAdmin</div>
  </div>
</template>