美文网首页
iview-admin 动态菜单

iview-admin 动态菜单

作者: 丿灬尘埃 | 来源:发表于2019-01-09 12:29 被阅读0次

开门见山,步入正题。

1.首先要明确以下几点 (这无序列表难受==)

  • 菜单list由后端生成
  • 菜单list必须和 routers.js保持一致
  • routers.js 里面该怎么写,就怎么写,不需要删除
  1. 需要有一丢对 vuex的基本操作,对于iview-admin有了一定了解,那么巧了,我没有了解,那么就做不了了吗?NO,一样可以。
    • 先搞一下store/module/app.js ,写一个获取菜单信息的actions:getMenuData,
  getMenuData ({ commit, rootState }, params) {
      mainList(params).then(res => {
        commit('setMenuRspList', res.data.data)
      }).catch(e => {
        console.log(e)
      })
    }

解释下:
1). mainList 是你获取list的一个方法,即

 axios.request({
    url:'',
    data(params):{},
    method:''
}).then(res=>{

}).catch(e=>{

})

2). setMenuRspList 是你定义好的方法,在state定义下:menuRspList:[ ],找不到在哪里?那么你可以把这个文件从头看一遍了,对,看一遍!
ok! 此时你的菜单已经获取完了,开始渲染!!!

  1. 现在该操作一下mutations了,在里面操作下你的setMenuRspList,
 setMenuRspList (state, list) {
      let len = list.length
      for (let i = 0; i < len; i++) {
        state.menuRspList.push(list[i])
      }

      state.hasInfo = true
    }

list就是你的菜单list,穿过来一定是个数组,因为是list

  1. 现在开始表演了
    修改gettters,什么 你又找不到了? 好吧,再把app.js从头到尾看一遍,(ctrl+f更简单!一般人不告诉他)
    menuList: (state, getters, rootState) => getMenuByRouter(state.menuRspList ),

改好了吗?
5.还有最后一步,就是在入口处调用下你的菜单路由:router/index.js中,随便在router.beforeEach中添加下

store.dispatch('getMenuData').then(res => {})

就好了
6.调用下吧,运行你的项目npm run dev是不是看到效果了呢?
7.注意vuex的运用有时候配置不对,菜单出现了,但是刷新就消失了为什么呢?
原因就是让你看vuex了,老实交代是不是没看,就知道不看,后悔不,没关系,我可以告诉你这个秘密哦。vuex中store并不是永久存储的,什么?解决办法?
修改下getter方法,或者在router\index.js里面做下文章,每次刷新都去请求下,就ok了,思路有了,接下来看你的表演了。

照着我的教程,我写了个小demo,附地址:github地址:https://github.com/Timedrugs/iview-admin-menu

第一版的时候我没有写第5步,很多人就出现了问题,其实你想想vue的生命周期,就知道怎么回事了
OK!

相关文章

网友评论

      本文标题:iview-admin 动态菜单

      本文链接:https://www.haomeiwen.com/subject/dbbwrqtx.html