這個(gè)章節(jié)知識(shí)點(diǎn)不多，但是很繞，而且我覺(jué)得不是最優(yōu)雅的寫(xiě)法，如果有更好的方法請(qǐng)給我留言

參考文章

https://www.cnblogs.com/langhaoabcd/p/11346227.html

簡(jiǎn)單分析

• 主要利用 router.addRoutes([]) //傳入數(shù)組

• global.antRouter = menus //賦值全局變量

• Siderbar/index return this.$router.options.routes.concat(global.antRouter) //路由合并

• 到此就完成了

通過(guò)permission.js開(kāi)始獲取權(quán)限管理

• await store.dispatch('user/getInfo')
• store/modules/user.js //這里通過(guò)vuex發(fā)起請(qǐng)求
• 此時(shí)getinfo包含改用戶的權(quán)限信息
• 后端返回?cái)?shù)據(jù)即可，前端處理成符合菜單的格式
• 存入到store中

function toTreeData(data,pid){
  function tree(id) {
    let arr = []
    data.filter(item => {
      return item.id_parentauth === id;
    }).forEach(item => {
      // console.log(item.href)
      let jsonpath = {
        path: item.href,
        name: item.name,
        meta:{title:item.name, icon: item.icon},
        children: tree(item.id_auth)
      }
      if(!Boolean(item.id_parentauth)){
        jsonpath.component = Layout
        // jsonpath.redirect = '/example/table'
      }else {
        //解決import無(wú)法導(dǎo)入的問(wèn)題
        jsonpath.component =  (resolve) => require([`@/views/${item.href}/index`], resolve)
      }
      arr.push(jsonpath)
    })
    return arr
  }
  return tree(pid) // 第一級(jí)節(jié)點(diǎn)的父id，是null或者0，視情況傳入
}

最后一步獲取vuex的menu并放入addRouters

• const menus = store.getters.menus
• router.addRoutes(menus) // 2.動(dòng)態(tài)添加路由
• global.antRouter = menus // 3.將路由數(shù)據(jù)傳遞給全局變量，做側(cè)邊欄菜單渲染工作
• 合并路由 this.$router.options.routes.concat(global.antRouter) //路由合并