uni-app路由方案如何设计？

Question

最近公司需要用 uni-app 框架开发项目了，目前公司有一个管理后台系统需要做一个移动版，所以有如下要求：

1、功能菜单比较多，但是会相较于web端做一些简化；
2、需要支持android app、微信小程序、web h5；
3、进入首页（所有页面）需要登录；访问某个菜单，如果没有权限像 vue 一样，对应菜单没有注册路由，所以能保住无法跳转过去；

因为需要打包成小程序，功能又比较多，所以有必要考虑到分包，甚至需要和vue一样，采用动态加载的方式，但是不知道如何实现好一点；

因为设计到权限校验，登录验证等，所以需要考虑像vue-router来做路由拦截，如上考虑在vue里面还是比较好做的，但是由于 uni-app 不熟悉，想请大家指点一下，怎么做比较好。

方案一：
老老实实在pages.json把需要的菜单页面都配置出来，包括分包逻辑，这样会有如何下问题：
1、还是不能保证体积会不会超标？
2、配置太复杂（功能太多），能不能通过代码的方式，在获取数据后，动态生成路由？
3、路由拦截的问题，如果采用uniIdRouter的方式，不同端的逻辑有不一样，如下是网上找的资料：

uniIdRouter底层使用navigateTo、redirectTo、reLaunch、switchTab的拦截器进行页面跳转拦截，不会拦截进入首页，web端和app端会拦截原生tabbar点击，其他端不会拦截原生tabbar点击。 一般tabbar页面都不做自动跳转，而是在页面内再提供登录按钮。

4、uniIdRouter好像还和 uniCloud 关联了，并且配置needLogin也不太方便（不能配置不需要登录的页面），反正就是不够灵活，不能动态配置；

注：第3、4点是采用 uniIdRouter 方案的弊端；

方案二：

采用框架 uni-simple-router 来处理，该框架也不太熟悉，稍微看了一下文档，如果能解决如下问题的话，赶紧应该是比较好用的。

1、能够动态添加路由（不需要到 pages.json 里面一个个菜单手动配置）；
2、所有的页面，包括 tabbar 对应的页面都能一视同仁的方便拦截；

有用过该插件的朋友吗？

对于这块需求，大家有什么好的建议吗？

感谢！

Answer 1

需求里面提到了是需要支持 Android APP、微信小程序、H5 这些的。
由于小程序方面的限制，如果你需要增加拦截的话原生的 tabBar、navbar 的使用就可以放弃了，只能使用自定义的形式。
同样的由后端返回数据然后动态添加的路由方式也可以放弃了，你还是得全部都添加好。

路由守卫方面，看 uni-simple-router 的文档，里面是说：

v1.5.2 起 uni-simple-router 适配所有小程序端。

所以可能路由守卫是可以用的，但是还是对其表示存疑。

---

总的来说，路由表你肯定是要手写的了，除非你不考虑小程序。

路由拦截器方面，可以考虑使用 uni-simple-router 提供的路由拦截器。并不能用 自定义指令 的方式（v-hasPermi）来动态删除入口元素的。

权鉴的部分，同时使用路由拦截器 + 页面内权鉴的方式来做，尽量做到最优的方式。如果拦截器不能使用，页面内也会再次权鉴来进行拦截。

最终打出来的包超标不超标的话得看你的具体也业务需求，如果你业务比较复杂和庞大，那么还是需要做分包的，分包的话就还是需要你手动配路由表……

---

本来跨平台就是这样的，没有一个完美的适配方案去解决所有的问题，只能尽量去适配，然后在一些独特的部分写兼容。