[TOC] >[success] # 路由守衛 ~~~ 1.具體介紹可以看路由章節 ~~~ >[info] ## 全局守衛 ~~~ 1.全局守衛的三個時期'beforeEach'、'beforeResolve'、'afterEach',三個時期具 體執行時期參考'路由守衛章節' ~~~ >[danger] ##### 使用'beforeEach' 做一個攔截登錄 ~~~ 1.首先'beforeEach'是所有路由中最早觸發的,因此我們整個登錄攔截 在'beforeEach' 周期做操作 2.小提示:一般判斷用戶是否登錄,都是根據'session' 來進行操作決定,因此我們 可以把'session' 數據保存在一個全局變量中,通過在'beforeEach'判斷'session' 是否存在 3.根據上面的提示我們可以勾畫出一個邏輯,用來判斷保存全局'session'的值來 決定跳轉頁面的順序,但是 我們可以在進一步優化,比如已經登錄的用戶,在訪問 登錄頁我們讓他直接跳轉到首頁,不需要用戶再次點擊登錄 4.根據上面的兩個提示基本可以勾勒出一個在'beforeEach'的一個登錄判斷 5.下面代碼還需要自己創建一個'login.vue'的視圖組件,和需要在'router' 文件夾 下的'router.js' 中去注冊組件和路由之間的關系 6.下面的to調用的方法可以參考官方文檔'https://router.vuejs.org/zh/api/#%E8%B7%AF%E7%94%B1%E5%AF%B9%E8%B1%A1' 這里再次說明下 這里的'to'等同于'route'和'$route' 因此他們的方法是通用的 7.下面的next中使用等同于'router-link' 中的'to'的使用方式,下面的next中網頁跳轉使 用的都是命名路由的方式 8.下面案例中'HAS_LOGINED' 表示全局儲存的session,這面案例中false表 示沒有登錄，true表示登錄 ~~~ * 在router 文件夾下的index.js 中書寫一下代碼 ~~~ import Vue from 'vue' import Router from 'vue-router' import routes from './router' Vue.use(Router) const router = new Router({ routes, }) // 到時候這里可以做一個全局變量專門保存session const HAS_LOGINED = false router.beforeEach((to, from, next)=>{ if(to.name !== 'login'){ if(HAS_LOGINED) next() else next({name:'login'}) }else{ if(HAS_LOGINED){ console.log('觸發') next({name:'home'}) } else{ console.log('觸發') next() } } }); export default router ~~~ >[danger] ##### 'beforeResolve' 詳細可以參考路導航守衛章節 >[danger] ##### 'afterEach' 在路由結束時候去做一些事 ~~~ 1.注意'afterEach' 沒有 'next' 因為已經是最后階段了所以不需要'next()' ~~~ * 在 router 文件下的index.js 中配置這個周期（因為是最后一個周期所以不需要next 往下傳遞） ~~~ router.afterEach((to, from)=>{ console.log('都結束了') }); ~~~ >[info] ## 路由獨享守衛 ~~~ 1.路由獨享守衛'beforeEnter',在渲染改組件路由確認前調用 2.根據上面的解釋，我們我可以推測出這方法應該寫的位置，這個路由和組 件綁定的位置在我們這個目錄中'router' 文件夾下的'router.js' 中去配置的， 路由和組件的關系，因此這個方法的調用也應該在這個地方 3.可以做一些 判斷頁面是從哪里來的判斷 ~~~ >[danger] ##### 案例 * 在 router 文件下 的router.js 中進行路由獨享守衛配置 ~~~ import Home from '@/views/Home.vue' export default [ { path: '/about', name: 'about', // 我是路由的一個屬性是about 的專屬 beforeEnter(to, from, next){ console.log('beforeEnter 路由中的路由'); next(); }, component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue') }, ] ~~~ >[info] ## 組件內守衛 ~~~ 1.組件內守衛分三個階段: 'beforeRouteEnter'、'beforeRouteUpdate'、'beforeRouteLeave'三個階段會在不同時刻觸發 2.'beforeRouteEnter' 在還沒有進入該組件之前觸發，一般用獲取異步請求 ，可以替代vue生命周期中獲取數據請求 3.'beforeRouteUpdate'在動態路由中使用，由于動態路由中切換路由的時候 ，猶豫綁定的是同一個組件因此在不會在重新渲染，但是為了可以讓組件中 的內容重新渲染，有兩種方法第一種使用watch 監聽，但這種需要使 用'props'寫法，另一種就是在'beforeRouteUpdate' 它會監聽到動態路由的改 變，因此可以在這個周期中異步動態路由對應的數據 4.'beforeRouteLeave' 離開組件的時候觸發，可以對表單一些校驗未提交的 時候觸發詢問用戶是否到下一個頁面官方的說法這個離開守衛通常用來禁止 用戶在還未保存修改前突然離開。該導航可以通過 next(false) 來取消。 ~~~ >[danger] ##### 案例 ~~~ 1.在'路由篇章中的導航守衛' 有詳細的案例講解，這里的案例只是簡單說明 2.案例中做了一個離開詢問 3..'beforeRouteUpdate'在動態路由中使用 這里具體用法見路由篇章 ~~~ ~~~ <template> <div class="about"> <h1>This is an about page</h1> </div> </template> <script> export default { beforeRouteEnter(to, from, next){ // 路由進入組件之前觸發， // 正因為還沒有進入組件前觸發想獲取組件實例本身也就是this，需要在next中操作 next( vm =>{ console.log(this) } ) }, beforeRouteLeave(to, from, next){ // 路由即將離開組件的時候調用 // 做一些詢問，詢問 const leave = confirm('你確定離開么') if(leave) next() else next(false) } } </script> ~~~ >[info] ## 路由元信息 ~~~ 1.路由元信息的便簽屬性是'meta',這個在html中是個常見的標簽，有時候， 我們會把html 的meta一些配置參數放到這里，下面的案例就是動態生成， html的title 2.分析上面要做的事，首先每個頁面都有'title',因此他們是公共的方法，可以給這 個方法提取到我們的'lib' 文件夾下的'util.js' 中 3.下面思考觸發的時機，整個觸發的時機最好的點就是'beforeEach'階段是這個路 由最開始的階段 4.我們在給'beforeEach'這個階段使用我們定義的方法時候，兩個知識點，一個是 要導入我們寫的方法，另一個'if(條件){執行}'這種邏輯代碼可以縮寫成， '條件&&執行' ~~~ * 在lib的util.js 寫的更改title方法(直接改變當前頁面的title) ~~~ export const setTitle = (title)=>{ window.document.title = title || 'admin'; }; ~~~ * 在路由中定義 meta 的title 名稱，這里我們只在about 的視圖組件定義 ~~~ import Home from '@/views/Home.vue' export default [ { path: '/about', name: 'about', meta:{ title:"首頁", }, beforeEnter(to, from, next){ next() }, component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue') } ] ~~~ * 在router 文件下的index.js 配置的路由守衛'beforeEach'中配置 ~~~ import Vue from 'vue' import Router from 'vue-router' import routes from './router' import {setTitle} from "../lib/util"; Vue.use(Router); const HAS_LOGINED = true; const router = new Router({ routes }); router.beforeEach((to, from, next)=>{ to.meta && setTitle(to.meta.title); if(to.name ==='login'){ if(HAS_LOGINED) next({name:'home'}); else next() }else{ if(HAS_LOGINED) next(); else next({name:'login'}) } }); router.afterEach((to, from)=>{ console.log('都結束了') }); export default router ~~~