vue 定义全局弹框_VUE路由拦截：Vue自定义全局弹窗组件

前言

在任何一个平台中，如果需要增加用户黏度，除了用户需要的基本内容外，用户登录注册提交信息也是非常重要的一环，可以了解用户基本信息，用户喜欢等。

抛出前后端混合开发外，vue可以轻松的实现路由拦截。Vue Router对路由集中统一管理，所以我们可以在main.js中添加如下代码，对所有路由进行拦截：

是不是非常便利呢？

Vue自定义全局弹窗组件

有了路由拦截，我们来撸一个全局弹窗组件login.vue

index.js

然后我们就可以将其挂载到全局，main.js中

后续，我们在vue页面可以直接使用this.$login()，调起登录弹框。

下面，我们对路由拦截进行处理

路由拦截，登录弹框

这里简单示例，home页面是不需要登录的，而order页面需要登录，我们在meta里面添加login字段来标识，同时去main.js路由拦截里面来判断meta.login处理。

这样做的本质意思就是，需要登录的页面，我们先调用一个需要登录的接口(后台配合处理，比如约定200表示已经登录，500表示未登录)，如果接口返回200，可以把页面内容给用户看，否则，拦截弹出登录框，登录完成，页面给用户看。

router.beforeEach详细介绍

router.beforeEach(全局前置守卫)，当一个导航触发时，全局前置守卫按照创建