vue菜单路由权限管理

设计思路

根据登录账号的角色权限返回路由对象和菜单

json

//路由对象

[{name: "home",path: "/",component: "home" },
{name: "home",path: "/userinfo",component: "userInfo"}] 

//菜单
[{name: '首页',path: '/'},
{name: '更多',path: '/more'},
{name: '关于',path: '/about'}]

遍历路由对象分别加上组件

RouterCom.js

const Home = () => import("../pages/Home.vue");
// 根据权限才能添加的路由
const About = () => import("../pages/About.vue");

export default {
    home, about
}; 

permission.js

import router from './index'


// router.matcher = new VueRouter().matcher
if (true) { //根据权限添加路由
    router.addRoute({
        path: '/tree',
        name: 'tree',//如果路由有一个 name，并且已经有一个与之名字相同的路由，它会先删除之前的路由。
        component: () => import('../views/example/tree.vue')
    })
}

在main.js或App.vue中调用

//在main.js中
import './router/permission'