vue——后台管理系统之动态路由权限（左侧菜单按角色分配显示）

效果图如下：

 图上的动态路由即为我们动态添加

1、router里面添加

 代码如下：

export const asyncRoute = [
  {
    path: 'external-link',
    component: Layout,
    children: [
      {
        path: 'https://panjiachen.github.io/vue-element-admin-site/#/',
        meta: { title: '动态路由', icon: 'link' }
      }
    ]
  },

  // 404 page must be placed at the end !!!(注意不能省略)
  { path: '*', redirect: '/404', hidden: true }
]

2、router里面添加

 

 代码如下：

const permissList=[...constantRoutes,...asyncRoute]
          router.options.routes=permissList
          router.addRoutes(permissList)

需要完整代码的同学可以到这里下载：后台管理系统之——动态路由添加使用（左侧菜单按角色权限动态显示）-Javascript文档类资源-优快云下载