溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了Vue中的全局守衛怎么配置的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Vue中的全局守衛怎么配置文章都會有所收獲，下面我們一起來看看吧。
在main.js中進行配置：
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 全局守衛
router.beforeEach((to, from, next) => {
// 獲取登陸狀態
let isLogin = sessionStorage.getItem('sid') //存儲的sessionStorage的信息，登陸時使用sessionStorage.setItem('sid', '已登錄') 設置本地存儲信息
if (to.name === 'login') { // 如果是登錄頁，則跳過驗證
next() //鉤子函數
return
}
if (!isLogin) { // 判斷登陸狀態,sessionStorage不存在的情況下
ElementUI.Message({ //提示消息
message: '請先登錄系統',
type: 'error'
})
next({
name: 'login'
}) // 如果未登錄，則跳轉到登錄頁
} else {
next() // 如果已經登陸，那就可以跳轉
}
})
“to”: 即將要進入的目標路由對象;（包含name，params，meta等屬性）
“from”: 當前導航正要離開的路由對象；（包含name，params，meta等屬性）
“next”: 確保要調用 next() 方法，否則鉤子就不會被 resolved。這個當中還可以傳一些參數。
鉤子函數：鉤子函數是在一個事件觸發的時候，在系統級捕獲到了他，然后做一些操作。一段用以處理系統消息的程序。“鉤子”就是在某個階段給你一個做某些處理的機會。
關于“Vue中的全局守衛怎么配置”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“Vue中的全局守衛怎么配置”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
