若依前后端分离框架踩坑之路

资源

若依官网
若依官网 - 前后端分离演示地址
若依官网 - 前后端分离文档地址

踩坑

1. el-date-picker type="datetime" 组件使用时，错误信息 mask.replace is not a function

• 出错原因

vue 示例上 dateFormat 跟 element 计算属性冲突了

• 参考文章

https://github.com/ElemeFE/element/issues/11192

• 解决方法

image.png
全局替换下这个方法：dateFormat => transformDateFormat

2. data functions should return an object: 、Property “type” must be accessed with "$data.type" 等等一些类的语法错误信息

• 出错原因

Message.error(err) 方法传的参数格式不正确

• 参考文章

https://github.com/PanJiaChen/vue-element-admin/issues/2602#issuecomment-535808864

• 解决方法

image.png
全局替换下这个方法：Message.error(err)=> Message.error('出错了！')

3. keep-alive 组件中的 include 属性设置无效的问题

• 项目中设置时的代码部分

代码截图

由于这个框架的初始阶段，作者写的路由中的 name 和 title 属性都是一样的中文字符，所以 cachedViews 这个数组中储存的都是一堆的中文值；
实际上 keep-alive 组件匹配的都是路由对应的 .vue 页面中的 name 属性，但是这个属性如果使用中文格式的文本就会报错无法识别，所以问题解决的方法就是 这个系统所有页面的缓存，都需要后端把路由的 name 属性全部改为英文的写法，前后端保持一致