采用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)
}