Vue动态路由、菜单（解决了刷新菜单空白问题） 全局前置守卫router.beforeEach Vuex

一、动态路由/菜单

---

1、【获取接口数据】登录时请求接口，一般是数组数据

       具体看后端怎么返回，此处后端返回了菜单数据的接口有：登录接口、获取菜单接口

       此处后端返回数据格式如下：

 

2、【根据项目文件，转换对应动态路由的路径】

       因为本项目所有子页面都放在view文件夹下，根据返回的数据中“components”字段 ，就是对应的组件名，菜单目录如下：

---

【登录组件】

使用对象展开运算符将menus混入到computed对象中，相当于将this.menus映射为store.getters.menus，具体参考Vuex的Getter说明；

同理，将addMenu混入到methods对象中，可以直接this.addMenu使用

 

---

【addMenu函数存储在store中】 此处利用了Vuex存储菜单

  原理：获取到后端返回的菜单数据之后，转换为动态路由格式的数据；

            其中addMenu通过store.commit方法调用了事件‘types.ADD_MENU’（使用了ES6的计算属性名，定义事件的名字）；

          然后存储菜单数据，到state.menus属性中、localStorage中（setStore是封装了一下存储函数，直接写localStorage.setItem('menus', JSON.stringify(XXX))也可）

---

【封装的自定义函数】setStore、getMenus（根据具体组件路径修改）

 

3、【登录成功后，获取菜单】 菜单组件

       首先，UI组件用的是ElementUI喔，所以需要在标签中添加router属性（不要忘记哈）

       然后，定义了一个menuList接收菜单数据，其中菜单栏就是通过此值进行循环滴

---

---

【监听菜单menus的值】

通过监听存储在store的menus，将menus值赋值给当前菜单组件的menuList，即动态菜单获取、渲染成功（因为添加菜单时异步函数，可能在登录成功之后才赋值成功）

 

二、菜单刷新空白问题（main.js）

1、在main.js中判断，是否存在token值（是否登录，登录时生成的token值）和菜单数据

（因为添加的是动态路由，所以刷新会没有，需要再次添加到动态路由中，再次请求接口是为了实时获取后端数据，而不是前端缓存数据）

 

2、【登录成功后的首页组件】

【问题描述】此时效果是，登录成功之后，可以正常加载动态路由，但是一刷新，菜单就出现空白

【问题原因】 因为什么呢，上上个图中，即菜单组件中，只是监听了menus的最新值，所以刷新时，menus没有改变，menuList就得不到赋值，此时在mounted生命周期中赋值即可（每次刷新，因为都会经历生命周期嘛）

 

三、路由的全局前置守卫（main.js）

1、在main.js中引入router之后，判断是否登录，若已登录，直接next回调函数即可

【此处的首页，就是登录页】

 

总结：

1、 动态路由，主要是获取到后端数据，然后修改动态路由需要的格式，一般通过懒加载方式有以下两种(区别component 和 components)：     

component: resolve => (require(['xxx/xxx/xx.vue'], resolve))

components: require('xxx/xxx/xx/vue')

2、动态菜单，主要是router.addRoutes(routes)，因为动态添加路由，所以在刷新时需要重新添加（即main.js中修改，因为每次加载组件，首先会执行main.js文件）

3、全局前置守卫，主要是判断用户是否登录，若未登录访问，可以设置跳转到登录页；否则已登录，执行next回调函数即可

写给自己的随笔，有问题欢迎指出ᕦ(･ㅂ･)ᕤ