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] 54         }
      }
    }
  }
  return Params
}

 

 

• 文章中的重點部分，我已經用紅色代碼標注出來的，文章整體不太適用於粘貼黨，粘貼黨需要根據自己的業務進行修改。
• 以上只是一種方式，還有其他的更好方式，請在評論處留下地址，方便我們共同成長。