实现原理也是根据当前登录用户的菜单,动态生成用户能看到哪些具体的菜单。
- 首先写好所有匹配的路由,格式如下
- 下main这两种图都是在src下的router文件夹的user或者role对应的文件夹下创建的。
然后进行路由的动态匹配
上面封装好的mapMenuToRoutes方法,在store登录模块中进行了调用,因为在点击登录时,就获取了登录用户能看到的菜单,然后在mutations里,把actions请求回来的useMenu传到该函数里。然后,再利用router对象的addRouter方法,把mapMenuToRoutes里的返回值routes添加到main一级路由下面。
下面这张图片是在总的store里分发的actions
下面这张图也是在actions里写的代码,是因为用vuex存储数据的话,即使在登陆状态,然后刷新页面也会丢失数据,所以从本地存储中读取各种数据,然后重新commit`` mutations