VUE 动态菜单管理

业务场景

不同的用户登录，看到的菜单会不一样，因此需要根据不同人登录的身份去后端获取菜单。

实现思路

1.构建路由

2.从后端构建菜单

3.前端获取菜单

4.前端渲染菜单

1.构建路由。

export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },

  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },

  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: 'Dashboard', icon: 'dashboard' }
    }]
  },

构建路由

const createRouter = () => new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

const router = createRouter()

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router

2.从后台构建menu菜单

@RequestMapping("/get")
    @ResponseBody
    public JSONArray menu(HttpServletResponse response) throws IOException {
        StringBuilder sb=new StringBuilder();
        sb.append("[");
        sb.append("{");
        sb.append("    "path": "/login",");
        sb.append("        "hidden": true");
        sb.append("},");

        sb.append("{");
        sb.append("   "path": "/404",");
        sb.append("        "hidden": true");
        sb.append(" },");

        sb.append("{");
        sb.append("    "path": "/",");

3.前端获取菜单

export function getMenu() {
  return request({
    url: '/menu/get',
    method: 'get'
  })
}

4.渲染菜单

created() {
        
        getMenu().then( res => {
            this.routes=res.data;
          debugger
        }).catch(error => {
          console.info(error)
            debugger
        })
  }

调用API获取菜单，并复制到 routes 中。

 <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />