vue-vuex-vueRouter-axios-elementUi搭建的前端工程

采用vue2以及vue全家桶搭建的vue前端项目，代码路径

一、代码结构

• api：主要用于书写项目中的接口
• assets：主要存放一些静态的图片或者一些公共样式表
• components：主要存放组件
• directive：主要存放一些自定义指令
• icons：主要存放图标（字体图标、svg等）
• layout：布局，主要存放系统整体布局的vue文件
• mixins：混入，主要放一些公共的混入内容（vue中参数、方法、监听等）
• router：路由，主要是系统的页面路由
• store：状态管理，vuex
• utils：工具类
• views：主要存放系统页面
• main.js：程序入口
• permission.js：主要写路由拦截（全局守卫）

二、路由设置

项目中的所有菜单需要做权限控制，所有菜单都是存库的，因此需要用到vue-router的动态路由，下图的children就是后面需要从接口中获取的

获取到路由后然后通过addRoutes去动态添加路由

 三、vuex的模块化书写

 index.js中的内容，将modules中的模块引入

列举一例，user.js中的书写如下：

四、axios请求的封装

 五、路由的全局守卫

 六、问题

1、vuex的持久化：系统内的token都是从vuex中获取，但是vuex有个问题就是，他是会话级别的存储，一刷新页面vuex就会清空，所有在这里需要将token进行一个初始化token: getToken()，getToken()方法其实就是utils中写的一个从cookies内拿token的方法，因此在一开始登录成功后就得将token值存储在cookies中

2、ElementUI导航栏中的vue-router在3.0版本以上重复点菜单会出现报错问题

 解决方案：在router的index.js文件中加入以下代码

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}