uniapp wap vue-router

很久一段时间没有写博客了，连续4个多余的加班让我身心疲惫，最近刚刚才有缓和的实际，那就整理下之前做的东西，顺便坐下记录方便未来查阅吧。

 

最近在做包网项目，前期缺少策划并且自己并没有相关的经验，导致后面代理多了的时候被一些琐事的东西搞得焦头烂额。
急需解决的大概有一下两个东西：
1.定制化
2.权限管理

定制化可以大概分为几个内容：
1.主题定制
2.模块定制

主题定制目前有比较简单的处理方案，
1.就是写几套代码，根据服务器给的参数调用对应的模块（不外乎就是全局覆盖那一套的东西）
2.另外一种比较细的处理方式就是后台接口提供几种色值，前端的颜色配置都写在js里面获取到数据后再渲染

模块定制：
1.写几套不同排版的站点，更加用户需要切换不同的git分支即可
2.涉及具体模块的删减（需要更加接口来进行填充页面），需要设计，后台，前端三方人员的沟通，避免删除或者增加导致的布局破坏从而无法商用

对目前的项目状态的评价是：
1.比较粗糙，只是能用，涉及具体模块的删减和排序，后端没有提供相关的数据，每次都是来一个代理切换下分支和修改下站点的信息。
2.涉及主题这块，在pc上是根据接口响应的数据使用异步组件去请求对应的文件的，模块定制这块也是这样处理。个人认为pc端这块已经不需要再优化可以满足业务使用。
3.wap目前并没有开始做定制化和模块管理这一块的工作，uniapp的一些特性导致wap的配置必定和pc的不打一样，需要区分app和wap

tabbar模块自定义
1.uniapp自带的tabbar无法满足这块的要求，所以需要放弃pages.json文件里面的tabBar配置
2.首页tabbar这块在5+app上用动态组件的方式根据后端数据来配置，但是无法使用路由动画(可以使用自己实现的transition组件)
3.首页tabbar在wap上面可以使用和5+app上面的处理一样，但是可以通过transition组件来添加切换动画

wap路由切换动画
1.5+app环境uniapp提供了切换动画，但是wap环境却没有提供动画
2.可以使用vue-router来实现wap的路由动画，但是却无法使用addRouter这一的动态路由的方式实现
因为uniapp的loader或者其他打包工具做了修改打包内容是依据pages.json的配置进行打包的，即使使用了addRouter浏览器地址能够跳转页无法匹配到对应的文件
3.vue-router自带的路由跳转api以及路由可以使用，封装一下路由代码做一下平台区分就可以，所有跳转都使用封装后的跳转函数

路由权限
1.vue-router的addRoutes无疑是实现路由权限的最快捷和方便的处理方式，无奈uniapp不支持，wap一样！
2.处理方法是写一个以路由path为key的obj，在使用封装的跳转函数前判断一下是否有权限
3.针对用户可能直接浏览器地址栏打开无权限的页面的情况，需要在created函数里面再次判断一下如果无权限干掉当前页面调到异常页面（这个功能个人认为最好写在mixins里面统一处理，权限页面混入）

 

其实一开始我是想好好梳理一下路由权限这一块的，但是没整理好思路，暂时就先这样吧。