Ant Design Vue Pro靜態(tài)路由如何改為動態(tài)路由

更新時間：2023年10月23日 09:27:30 作者：小楊很困1

這篇文章主要介紹了Ant Design Vue Pro靜態(tài)路由如何改為動態(tài)路由問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

Ant Design Vue Pro靜態(tài)路由改為動態(tài)路由

回顧一下將Ant Design Vue Pro靜態(tài)路由改為動態(tài)路由。

由于業(yè)務(wù)需求，需要對Ant Design Vue Pro框架的路由部分進(jìn)行一個重構(gòu)，

首先Ant Design Vue Pro是帶有兩套路由的，分別需要在不同的地方進(jìn)行配置，

下面就來說說我開發(fā)過程中碰到的問題并如何解決的

需要改動到的文件

src\store\index.js
src\store\modules\async-router.js
src\store\modules\user.js
src\router\index.js
src\router\generator-routers.js

首先我們需要找到src\store\index.js文件

把import permission from ‘./modules/static-router’ 注釋掉這個是靜態(tài)路由

把import permission from ‘./modules/async-router’ 放開這個是表示引用的動態(tài)路由

第二步找到src\permission.js文件

找到 GetInfo方法這個方法是獲取用戶信息的直接去src\api\login.js文件中修改請求路徑其中寫的時候要看看后端傳過來的數(shù)據(jù)結(jié)構(gòu)，根據(jù)自己后端傳過來的結(jié)構(gòu)進(jìn)行調(diào)整

第三步找到src\store\modules\async-router.js 找到generatorDynamicRouter方法進(jìn)去src\router\generator-routers.js里面

要注意的是這邊后端的數(shù)據(jù)結(jié)構(gòu)與你自己請求后端傳過來的數(shù)據(jù)結(jié)構(gòu)是否一樣現(xiàn)在的是

//官方傳過來的數(shù)據(jù)結(jié)構(gòu)
    {
      name: 'dashboard',
      parentId: 0,
      id: 1,
      meta: {
        title: 'menu.dashboard',
        icon: 'dashboard',
        show: true
      },
      component: 'RouteView',
      redirect: '/dashboard/workplace'
    }

    // form
    {
      name: 'form',
      parentId: 0,
      id: 10,
      meta: {
        icon: 'form',
        title: 'menu.form'
      },
      redirect: '/form/base-form',
      component: 'RouteView'
    },
    {
      name: 'basic-form',
      parentId: 10,
      id: 6,
      meta: {
        title: 'menu.form.basic-form'
      },
      component: 'BasicForm'
    },

然后我這邊后端傳過來的數(shù)據(jù)結(jié)構(gòu)是后端這邊把數(shù)據(jù)結(jié)構(gòu)給我處理好了我只需要對部分字段鍵值進(jìn)行修改就好了方法也可以給你們參考一下這邊的改動也是最復(fù)雜的

// 我這邊后端傳過來的數(shù)據(jù)結(jié)構(gòu)
[
    {name:'數(shù)據(jù)總覽',
    id:'1',
    component:"RouteView",
    parentId: 0,
    url: "/dashboard",
    children:[{children:'',parentId:'1',title:'數(shù)據(jù)分表',url:'/dashboard/supplyHome'}]
    },
    {name:'數(shù)據(jù)總覽',
    id:'1',
    component:"RouteView",
    parentId: 0,
    url: "/dashboard",
    children:[{children:'',parentId:'1',title:'數(shù)據(jù)分表',url:'/dashboard/supplyHome'}]
    },
]

    // 解構(gòu)拆分方法
/**
 * 動態(tài)生成菜單
 * @param token
 * @returns {Promise<Router>}
 */
export const generatorDynamicRouter =  () => {
  return new Promise((resolve, reject) => {
    const pores = storage.get('self_list')
    loginService.getCurrentUserNav().then(res => {
      console.log(res.data)
      if (res.code === 200){
        const list = JSON.stringify(res.data).replace(/childMenu/g, "children")
        const result = JSON.parse(list)
        console.log(result)
        const menuNav = []
        const childrenNav = []
        //      后端數(shù)據(jù), 根級樹數(shù)組,  根級 PID
        // listToTree(result, childrenNav, 0)
        rootRouter.children = result
        rootRouter.children.forEach(item=>{
          item.component = 'RouteView'
          item.title = item.name
          item.children.forEach(o=>{
            if (o.url.split('/').length>2){
              o.component = o.url.split('/')[o.url.split('/').length-2]+capitalized(o.url.split('/')[o.url.split('/').length-1])
              o.title = o.name
              o.name = o.url.split('/')[o.url.split('/').length-2]+capitalized(o.url.split('/')[o.url.split('/').length-1])
            }
          })
        })
        menuNav.push(rootRouter)
        const routers = generator(menuNav)
        // routers.push(notFoundRouter)
        routers[0].redirect = '/dashboard'
        routers[0].meta.title = '首頁'
        routers[0].name = 'index'
        resolve(routers)
      }
    })
  })
}

/**
 * 格式化樹形結(jié)構(gòu)數(shù)據(jù) 生成 vue-router 層級路由表
 * @param routerMap
 * @param parent
 * @returns {*}
 */
export const generator =  (routerMap, parent) => {
  return routerMap.map( item => {
    // const { title, show, hideChildren, hiddenHeaderContent, target, icon } = item.meta || {}
    // const currentRouter = item
    const currentRouter = {
      // 如果路由設(shè)置了 path，則作為默認(rèn) path，否則 路由地址 動態(tài)拼接生成如 /dashboard/workplace
      path: item.url || `${(parent && parent.url) || ''}/${item.key}`,
      // 路由名稱，建議唯一
      key: item.url,
      name: item.name || item.key || '',
      // 該路由對應(yīng)頁面的 組件 :方案1
      component: constantRouterComponents[item.component],
      // 該路由對應(yīng)頁面的 組件 :方案2 (動態(tài)加載)
      // component: constantRouterComponents[item.component || item.key] || (() => import(`@/views/${item.component}`)),

      // meta: 頁面標(biāo)題, 菜單圖標(biāo), 頁面權(quán)限(供指令權(quán)限用，可去掉)
      meta: {
        title: item.title,
        icon: item.icon || undefined,
        // hiddenHeaderContent: hiddenHeaderContent,
        // target: target,
        permission: item.permission
      }
    }
    // if (item.type === 0) {
    //   currentRouter.component = RouteView
    // }else if (item.type !== 0){
    //   currentRouter.component = constantRouterComponents[item.url]
    // }


    // // 是否設(shè)置了隱藏菜單
    // if (show === false) {
    //   currentRouter.hidden = true
    // }
    // // 是否設(shè)置了隱藏子菜單
    // if (hideChildren) {
    //   currentRouter.hideChildrenInMenu = true
    // }
    // 為了防止出現(xiàn)后端返回結(jié)果不規(guī)范，處理有可能出現(xiàn)拼接出兩個 反斜杠
    if (!currentRouter.path.startsWith('http')) {
      currentRouter.path = currentRouter.path.replace('//', '/')
    }
    // 重定向
    // item.url && (currentRouter.path = item.url)
    // 是否有子菜單，并遞歸處理
    if (item.children && item.children.length > 0) {
      // Recursion
      currentRouter.children = generator(item.children, currentRouter)
    }
    return currentRouter
  })
}
// 字符換第一個字母大寫
const capitalized = (name)=>{
  const capitalizedFirst = name[0].toUpperCase();
  const rest = name.slice(1);
  return capitalizedFirst + rest;
}

然后還要再\src\store\modules\async-router.js 文件中修改一下邏輯

actions: {
    GenerateRoutes ({ commit }, data) {
      return new Promise(resolve => {
        generatorDynamicRouter().then(routers => {
          routers[0].children.forEach(item=>{
            item.redirect = item.children[0].path
            item.name = item.path.split('/')[1]
            delete item.key
            item.children.forEach(list=>{
              list.meta.title = list.meta.title.split('-')[0]
            })
            asyncRouterMap[0].children.forEach(op=>{
              if (op.path == item.path) {
                op.redirect = item.redirect
                item.children.concat(op.children)
              }
            })
          })
          commit('SET_ROUTERS', routers)
          resolve()
        })
      })
    }

經(jīng)過這些處理之后后端傳過來的數(shù)據(jù)結(jié)構(gòu)就變成了

[{
    path: '/',
    name: 'index',
    component: BasicLayout,
    meta: { title: 'menu.home' },
    redirect: '/dashboard/workplace',
    children:[
            {
            path: '/dashboard',
            name: 'dashboard',
            redirect: '/dashboard/workplace',
            component: RouteView,
            meta: { title: 'menu.dashboard', keepAlive: true, icon: bxAnaalyse, permission: ['dashboard'] },
            children: [
            {
            path: '/dashboard/analysis/:pageNo([1-9]\\d*)?',
            name: 'Analysis',
            component: () => import('@/views/dashboard/Analysis'),
            meta: { title: 'menu.dashboard.analysis', keepAlive: false, permission: ['dashboard'] }
            },
            // forms
            {
            path: '/form',
            redirect: '/form/base-form',
            component: RouteView,
            meta: { title: 'menu.form', icon: 'form', permission: ['form'] },
            children: [
            {
            path: '/form/base-form',
            name: 'BaseForm',
            component: () => import('@/views/form/basicForm'),
            meta: { title: 'menu.form.basic-form', keepAlive: true, permission: ['form'] }
            },
            {
            path: '/form/step-form',
            name: 'StepForm',
            component: () => import('@/views/form/stepForm/StepForm'),
            meta: { title: 'menu.form.step-form', keepAlive: true, permission: ['form'] }
            },
            {
            path: '/form/advanced-form',
            name: 'AdvanceForm',
            component: () => import('@/views/form/advancedForm/AdvancedForm'),
            meta: { title: 'menu.form.advanced-form', keepAlive: true, permission: ['form'] }
            }
            ]
            },
    ]
}]

到這里動態(tài)路由改造的就完成了，其中要注意兩點

1.啟動首頁有可能會出現(xiàn)白屏現(xiàn)象，解決辦法可以參考 Ant Design Vue Pro 動態(tài)路由加載，服務(wù)器重啟首頁白屏

2.要注意SET_ROLES的配置這里沒配置好的話會一直進(jìn)入死循環(huán)，造成內(nèi)存溢出