VUE路由拦截：Vue自定义全局弹窗组件
前言
在任何一个平台中，如果需要增加用户黏度，除了用户需要的基本内容外，用户登录注册提交信息也是非常重要的一环，可以了解用户基本信息，用户喜欢等。
抛出前后端混合开发外，vue可以轻松的实现路由拦截。Vue Router对路由集中统一管理，所以我们可以在main.js中添加如下代码，对所有路由进行拦截：
router.beforeEach((to, from, next) => {
...
next();
})是不是非常便利呢？
Vue自定义全局弹窗组件
有了路由拦截，我们来撸一个全局弹窗组件login.vue
<template>
<div v-if="visited">
<div id="login">
<div class="content">
<div class="title">会员登录</div>
<div class="item">
<input type="text" v-model="phone" placeholder="手机号码" maxlength="11" />
</div>
<div class="item">
<input type="text" v-model="smscode" placeholder="短信验证码" maxlength="4" />
<span>
<label>发送验证码</label>
</span>
</div>
<div>
<button class="submit" @click="submit">登录</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
phone: "",
smscode: '',
visited: false,
next: '' // 可以接受参数
};
},
methods: {
show() {
this.visited = true
},
submit() {
let vm = this;
// 调用登录接口200即成功，next()渲染页面
xxx.then(({data}) => {
// 登录成功
vm.next()
});
}
}
};
</script>
<style lang="stylus" scoped>
@import './index.styl';
</style>index.js
import Vue from 'vue'
import login from './login.vue'
const PopupBox = Vue.extend(login)
login.install = function (data) {
let instance = new PopupBox({
data
}).$mount()
document.body.appendChild(instance.$el)
Vue.nextTick(() => {
instance.show()
})
}
export default login然后我们就可以将其挂载到全局，main.js中
// main.js
import login from "./components/login";
Vue.prototype.$login = login.install;后续，我们在vue页面可以直接使用this.$login()，调起登录弹框。
下面，我们对路由拦截进行处理
路由拦截，登录弹框
// routers.js
...
const routes = [
{
path: "/",
name: "home",
meta: {
title: "首页"
},
component: () => import("../views/home.vue")
},
{
path: "/order",
name: "order",
meta: {
title: "订单列表",
login: true
},
component: () => import("../views/order.vue")
}
]
...这里简单示例，home页面是不需要登录的，而order页面需要登录，我们在meta里面添加login字段来标识，同时去main.js路由拦截里面来判断meta.login处理。
// main.js
router.beforeEach((to, from, next) => {
// 需要登录进行拦截
if (to.meta.login === true) {
// 比如这里调用一个需要登录的接口，
xxx.then(data => {
// 200成功表示已经登录
next();
}, (resp) => {
// 错误即为未登录
login.install({
next: next
// 这里可以传任意值，在login.vue => data
// 里面定义相同字段名字接收
});
})
} else { // 不需要登录可以直接渲染页面
next();
}
})这样做的本质意思就是，需要登录的页面，我们先调用一个需要登录的接口（后台配合处理，比如约定200表示已经登录，500表示未登录），如果接口返回200，可以把页面内容给用户看，否则，拦截弹出登录框，登录完成，页面给用户看。
router.beforeEach详细介绍
router.beforeEach（全局前置守卫），当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。
每个守卫方法接收三个参数：
1、to: Route: 即将要进入的目标 路由对象
2、from: Route: 当前导航正要离开的路由
3、next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
（1）next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
（2）next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
（3）next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
（4）next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。