先貼一波官方文檔的內容
const router = new VueRouter({ ... })router.beforeEach((to, from, next) => { // ...})當一個導航觸發時，全局前置守衛按照創建順序調用。守衛是異步解析執行，此時導航在所有守衛 resolve 完之前一直處于 等待中。
每個守衛方法接收三個參數：
to: Route: 即將要進入的目標 路由對象 from: Route: 當前導航正要離開的路由 next: Function: 一定要調用該方法來 resolve 這個鉤子。執行效果依賴 next 方法的調用參數。 next(): 進行管道中的下一個鉤子。如果全部鉤子執行完了，則導航的狀態就是 confirmed (確認的)。 next(false): 中斷當前的導航。如果瀏覽器的 URL 改變了 (可能是用戶手動或者瀏覽器后退按鈕)，那么 URL 地址會重置到 from 路由對應的地址。 next('/') 或者 next({ path: '/' }): 跳轉到一個不同的地址。當前的導航被中斷，然后進行一個新的導航。你可以向 next 傳遞任意位置對象，且允許設置諸如 replace: true、name: 'home' 之類的選項以及任何用在 router-link 的 to prop 或 router.push 中的選項。 next(error): (2.4.0+) 如果傳入 next 的參數是一個 Error 實例，則導航會被終止且該錯誤會被傳遞給 router.onError() 注冊過的回調。確保要調用 next 方法，否則鉤子就不會被 resolved然后這是我自己的總結
import Vue from 'vue'import Router from 'vue-router'import Login from '@/pages/login/Login'import Index from '../pages/index/Index'import Library from '../pages/library/Library'import Design from '../pages/design/Design'import Administration from '../pages/administration/Administration'import Production from '../pages/production/Production'import Global from '../common/global/Global'Vue.use(Router)const router = new Router({ routes: [ { path: '/', name: 'login', component: Login }, { path: '/index', name: 'index', component: Index }, { path: '/library', name: 'library', component: Library }, { path: '/design', name: 'design', component: Design }, { path: '/administration', name: 'administration', component: Administration }, { path: '/production', name: 'production', component: Production } ]})router.beforeEach ((to,from,next) => { //將所有需要登陸才顯示的頁面的路由都放進一個數組 const nextRoute = ['index', 'library', 'design', 'administration', 'production']; //獲取登陸狀態 let isLogin = Global.isLogin if(to.name === 'login') { //如果是登錄頁，則跳過驗證 next() //必不可少 return //以下的代碼不執行 } if(nextRoute.indexOf(to.name) >= 0) { //判斷該頁面是否需要登陸 if(!isLogin) { //判斷登陸狀態 next({ name : 'login'}) //如果未登錄，則跳轉到登錄頁 } else { next() //如果已經登陸，那就可以跳轉 } } else { //其他的無需登陸的頁面不做驗證 next() } })export default router
新聞熱點
疑難解答
圖片精選
