點擊右上方紅色按鈕關注“web秀”，讓你真正秀起來
前言
在任何一個平臺中，如果需要增加用戶黏度，除了用戶需要的基本內容外，用戶登錄註冊提交信息也是非常重要的一環，可以瞭解用戶基本信息，用戶喜歡等。
拋出前後端混合開發外，vue可以輕鬆的實現路由攔截。Vue Router對路由集中統一管理，所以我們可以在main.js中添加如下代碼，對所有路由進行攔截：
router.beforeEach((to, from, next) => {
...
next();
})
是不是非常便利呢？
Vue自定義全局彈窗組件
有了路由攔截，我們來擼一個全局彈窗組件login.vue
<template>
會員登錄
<label>發送驗證碼/<label>
<button>登錄/<button>
/<template>
<style><br>@import './index.styl';<br>/<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() 註冊過的回調。
總結
閱讀更多 web秀 的文章
