手撕vue 路由--路由监视、拦截

作者: 杨晶磊 | 来源:发表于2019-05-14 23:14 被阅读0次

起因

项目中今天需要一个app可以监视嵌套h5页面的最后一次动作，以便进行重置倒计时功能的时间，与app开发人员确认，在h5页面中调用一个window的对象的方法就成，于是什么时候调用是本次h5这块考虑的，对了h5页面是vue的单页面应用。

分析

首先肯定排除给所有的按钮加上调用，经过仔细分析能判断用户最后一次的动作的有两类操作，一个是页面跳转（页面间切换），另一个是http请求（页面内操作），给这两个加上全局拦截器就成。

因为使用了vue的router，于是在官方文档找找是否有对应官方实现，别说，还真找到了一个概念：导航守卫
官方文档中写道了有5个方式，不过按照我们的需求，需要一个全局的拦截器，那么直接排除：路由独享守卫和组件内守卫，剩余的：全局前置守卫、全局解析守卫、全局后置钩子

这三个都可以当做拦截器用，如果没有特殊需求的话，使用全局后置钩子就成：

router.afterEach((to, from) => {
   //你需要调用的代码
})

本文标题：手撕vue 路由--路由监视、拦截

本文链接：https://www.haomeiwen.com/subject/aneyaqtx.html