uni-app 怎么实现路由拦截

前言

随着业务的需求，项目需要支持H5、各类小程序以及IOS和Android，这就需要涉及到跨端技术，不然每一端都开发一套，人力成本和维护成本太高了。团队的技术栈主要以Vue为主，最终的选型是以uni-app+uview2.0作为跨端技术栈。以前一直听别人吐槽uni-app怎么怎么不好，但是没什么概念，这一次需要为团队开发一个项目的基础框架和一些示例页面，主要是支持路由拦截、http请求多实例、请求数据加密以及登录功能封装，发现uni-app的生态不怎么健全，比如我们项目很需要的路由拦截，http请求拦截，这些都没有提供，对于跨端的兼容问题也挺多的。这篇文章聊聊的路由拦截的调研，以及最终的选择和实现。

实现路由拦截的方式

• 使用uni-simple-router
• 重写uni-app跳转方法
• 对uni-app跳转方法做进一步的封装

使用uni-simple-router

uni-simple-router是为uni-app专门提供的路由管理器，使用方式跟vue-router的API一致，可以很方便的上手，Github 也有了六百多的start，它可以说是uni-app用来做路由管理很好的选择，但是我没有选择使用它，个人认为开发h5是可以的，但是如果做跨端，可能会有一些后患，接下来我们聊聊为什么不使用它的原因。

无法拦截switchTab、navigateBack

这个其实也不算是一个缺点，目前也没找到可以拦截这两个事件的路由插件，如果确实需要实现这两种跳转方式的拦截，也是可以实现的，可以使用下一种方式，对这两种方法进行暴力重写。

没有解决全部的跨端兼容问题

这个其实是我不选择它的主要原因，根据官方文档的说明，根据文档去配置和编写，基本上能解决所有端上的95%的问题，其他的5%的问题需要去查看编译到端的说明。代码还是严谨的，缺少1%都是不完美的，更何况是5%。这会导致在以后的使用过程中，可能因为兼容问题，导致自己没办法去解决，或者为了解决这个问题，需要花费大量的时间和精力，有可能得不偿失。

编译app时，不能用’nvue’作为启动页面

nvue 不能直接作为启动页面。因为在启动时 uni-app 会检测启动页面是否为原生渲染，原生渲染时不会执行路由跳转，插件无法正确捕捉页面挂载。这也是一个问题，我们可以尽量的去避免，但以后有未知的情况，可能我们的启动页必须就是以nvue来实现。

暴力重写uni-app跳转方法

这种方式虽然有点简单粗暴，但是效果挺好的，代码也很简短，Vue2.0对于数组的响应式监听也是采用这种方式。虽然实现了，但可能有些同学不知道怎么使用，直接把这段代码写在main.js就可以了，或者也可以在单独的文件里封装一个封装一个函数，然后在main.js引入，然后执行该方法。

const routeInterceptor = () => {const