循序渐进VUE+Element 前端应用开发(3）--- 动态菜单和路由的关联处理

[

  {

    id:'1',

    pid:'-1',

    text:'首页',

    icon:'dashboard',

    name:'dashboard'},

  {

    id:'2',

    pid:'-1',

    text:'产品列表',

    icon:'table',

    name:'product'},

  {

    id:'3',

    pid:'-1',

    text:'一级菜单',

    icon:'example',

    children: [

      {

        id:'3-1',

        pid:'3',

        text:'二级菜单1',

        name:'icon',

        icon:'example'},

      {

        id:'3-2',

        pid:'3',

        text:'二级菜单2',

        icon:'tree',

        children: [

          {

            id:'3-2-1',

            pid:'3-2',

            text:'三级菜单1',

            name:'form',

            icon:'form'},

          {

            id:'3-2-2',

            pid:'3-2',

            text:'三级菜单2',

            name:'menu1-1',

            icon:'form'},

          {

            id:'3-2-3',

            pid:'3-2',

            text:'三级菜单3',

            name:'menu1-2',

            icon:'form'},

          {

            id:'3-2-4',

            pid:'3-2',

            text:'三级菜单4',

            name:'menu1-3',

            icon:'form'}

        ]

      }

    ]

  },

  {

    id:'99',

    pid:'-1',

    text:'公司官网',

    icon:'table',

    name:'external-link'}

]

//定义本系统的所有路由，具体路由呈现经过菜单数据过滤
export const asyncRoutes ={'dashboard': {

    path:'/dashboard',

    component: Layout,

    children: [{

      path:'dashboard',

      name:'dashboard',

      component: ()=> import('@/views/dashboard/index')

    }]

  },'product': {

    path:'/product',

    component: Layout,

    children: [{

      path:'/product',

      name:'product',

      component: ()=> import('@/views/Product/index')

    }]

  },



  ..............................//省略部分

  'icon': {

    path:'/icon',

    component: Layout,

    children: [{

      path:'/icon',

      name:'icon',

      component: ()=> import('@/views/icons/index')

    }]

  },'external-link': {

    path:'http://www.iqidi.com',

    name:'external-link'}

}

const createRouter = () => newRouter({//mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0}),

  routes: constantRoutes

})



const router=createRouter()//重置路由
export functionresetRouter() {

  const newRouter=createRouter()

  router.matcher= newRouter.matcher //reset router
}

router.beforeEach(async(to, from, next) => {

const state ={menuItems:[],

  routes: [],

  addRoutes: [],

  asyncRoutes: asyncRoutes}

//定义了路由和菜单的Mutation
const mutations ={

  SET_ROUTES: (state, routes)=>{//var list = convertRoute(routes)
    routes.push({ path: '*', redirect: '/404', hidden: true }) //此为默认错误路由
state.addRoutes=routes

    state.routes= [].concat(routes)//constantRoutes.concat(routes)
},

  SET_MENUS: (state, menus)=>{

    state.menuItems=menus

  }

}

//定义了生成动态路由的Action处理
const actions ={

  generateRoutes({ commit }, roles) {return new Promise(resolve =>{

      getMenus().then(res=>{

        const menus= res.data || [] //统一通过接口获取菜单信息
        const routes =[]



        menus.forEach(item=>{

          filterRoutes(routes, item)

        })

        console.log(routes)//打印路由
commit('SET_ROUTES', routes)

        commit('SET_MENUS', menus)

        resolve(routes)

      });

    })

  }

}

export default{

  namespaced:true,

  state,

  mutations,

  actions

}