vue动态路由实现权限控制（vue2/vue3路由权限管理的方法实例）

import VueRouter from 'vue-router';
Vue.use(VueRouter)
...
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')
  },
]

const router = new VueRouter({
  routes
})

export default router

//假设有两种角色：admin 和 user 
//从后台获取的用户角色
const role = 'user'
//当进入一个页面是会触发导航守卫 router.beforeEach 事件
router.beforeEach((to,from,next)=>{
  if(to.meta.roles.includes(role)){
   next() //放行
  }esle{
   next({path:"/404"}) //跳到404页面
  }
})

import router from ‘./router‘
router.beforeEach((to, from, next) => {
   // ...
    if (to.matched.length === 0) {
        next('/404')
    } else {
        next()
    }
    //console.log(to, from, next, '路由守卫')
})

import { createRouter, createWebHashHistory } from 'vue-router';
...
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')
  },
]
const router = createRouter({
    history: createWebHashHistory(),
    routes: routers
})
export default router;

import {
    useRouter
} from 'vue-router';
export default {
    name: 'App',
    setup() {
        const router = useRouter();
        router.beforeEach((to, from, next) => {
            // ...
            if (to.matched.length === 0) {
                next('/404')
            } else {
                next()
            }
        })
    }
}