谈谈 动态路由

简述：动态路由就是在页面进行配置菜单，菜单配置的是已经存在的页面，根据角色来进行权限控制菜单的显示，然后根据配置用户来进行选择什么角色，角色可以选择多个。这样登录之后根据用户得到的角色菜单返回相应数据，前端进行增加展示。

获取动态路由：后端数据返回

const actions = {

  generateRoutes({ commit }, userId) {

    return new Promise(resolve => {

      getUserMenu({loginCode:userId}).then(response => {

        let routerArr = response.msg.children;

       // 这里asyncRouter可以是let  asyncRouter =[]；404放在固定的路由里面。

        let asyncRouter = [

          { path: '*', redirect: '/404', hidden: true }

        ];

        routerArr.forEach((value,index)=>{

          let firstObj = {

                path: index==0?'/':value.url,

                component: Layout,

                redirect: value.children[0].url,

                name: value.perms,

                meta: { title: value.text, icon: value.icon },

                children:[],

              }

          if(value.children.length>0){

            value.children.forEach((val,ind)=>{

              let menuObj = {

                  path: val.url,

                  name: val.perms,

                  component: () => import(`@/views${val.url}`),

                  meta: { title: val.text, icon: val.icon,per:[]}

                };

// 这里是判断是否存在页面按钮的权限控制

                if(val.children.length>0){

                  val.children.forEach((v,i)=>{

                    menuObj.meta.per.push(v.perms);

                  })

                }

              firstObj.children.push(menuObj);

            })

          }

          //将遍历好的push到路由数组中

          asyncRouter.push(firstObj);

        })

        commit('SET_ROUTES',constantRoutes.concat(asyncRouter))

        resolve(asyncRouter)

      }).catch(error => {

        // reject(error)

      })

    })

  }

}

在router.beforeEach中进行调用获取动态路由，然后将路由放进router.addRoutes

菜单页面的新增和展示和编辑。

菜单即动态路由所在的页面 后端返回一级二级三级菜单数据，这里就是动态路由获取的数据接口 角色-管理员设置时候，下面是传给后端各个菜单页面的标识ID,这个新增菜单时候固定了新增接口返回 传送给后端，menuId就是菜单ID，再菜单页面也可以看到 注意一个用户多个角色 这个是控制按钮是否显示 直接从路由中得到这个控制按钮的值，因为按钮的值是存在了meta中。