Vue | Router 基于Element-admin动态路由菜单下默认参数

创建动态路由下如何赋值默认参数？

• 从度娘得知，配置动态路由的文章有很多，但是找了很多没有找到适合自己的；基于Element-admin配置动态路由，
• 但是需要从后台配置默认的参数；如下

 

 

• 下面直接贴代码说明：

我的系统的动态路由都在permission.js拼接完成的,具体依赖 

import router from './router'

根据具体业务使用  router.addRoutes 添加动态的路由，具体的代码我相信这样的文章很完善了

• 下面就是本文的重点部分，如何配置路由中的参数默认值
• 我们都知道拼接路由少不了 path、component 、redirect 、meta 等等属性。
• 下面上代码，注意代码红色的部分，本文这里利用vue解析props这个方法的时候，将route中的query的进行赋值操作，获取的时候就可以根据 this.$route.query.属性名 自行获取了。

 

function generateRouteStrucChildren(asyncRouterMap, menusChildren) {
  for (const menu of menusChildren) {
    const permission = {}
    permission.path = getRouteName(menu.MODULE_ROUTE)
    permission.hidden = !Number(menu.MENU_PROP)
    if (menu.children.length) {
      permission.component = LayoutNull
      permission.redirect = 'noredirect'
    }
    else {
      permission.component = _import(menu.MODULE_URL + menu.MODULE_OBJ)
    }
    // permission.redirect = 'noredirect'
    permission.name = getRouteName(menu.MODULE_ROUTE)
    permission.props = route => {
      getParamters(menu.MODULE_ROUTE, route)
    }
    permission.meta = { title: menu.MENU_NAME, icon: menu.MENU_ICON, roles: [], param: getParamters(menu.MODULE_ROUTE) }
    permission.children = []
    if (menu.children.length) {
      // const childMenu = generateRouteStrucChildren(permission.children, menu.children)
      // permission.children.push(childMenu)
      generateRouteStrucChildren(permission.children, menu.children)
    }
    if (menu.MODULE_ROUTE.indexOf('FundPlanFiles') !== -1) {
      console.log(permission)
    }
    asyncRouterMap.push(permission)
  }
}

function getRouteName(router) {
  if (router && router.indexOf('?') !== -1) {
    return router.split('?')[0]
  }
  return router
}

/*
  实现对拼接到路由的参数进行解析，并添加到动态路由
  realize the analysis of the parameters spliced to the route and add them to the dynamic route
*/
function getParamters(urlStr, route) {
  var Params = {}
  var vars = urlStr.split('&')
  for (var i = 0; i < vars.length; i++) {
    var pair = vars[i].split('=')
    if (pair && pair.length === 2) {
      var propertyName = pair[0].split('?')
      if (propertyName && propertyName.length > 1) {
        Params[propertyName[1]] = pair[1]
        if (route) {
          route.query[propertyName[1]] = pair[1]
        }
      }
    }
  }
  return Params
}

 

 

• 文章中的重点部分，我已经用红色代码标注出来的，文章整体不太适用于粘贴党，粘贴党需要根据自己的业务进行修改。
• 以上只是一种方式，还有其他的更好方式，请在评论处留下地址，方便我们共同成长。