導航守衛
vue-router提供導航守衛主要通過跳轉或**取消*的方式守衛導航。有很多方式植入路由導航中：全局的、單個路由獨享的，或者組件級的。
全局前置守衛：beforeEach。
每個守衛接收兩個參數：
- to：將要進入的目標
- from：當前導航正要離開的路由
const router = createRouter({...})router.beforeEach((to,from)=>{//如果返回false會取消當前導航return true});//跳轉到其他路由router.beforeEach((to,from)=>{//可以根據路由的name或path等跳轉，需要判斷只跳轉一次，否則會多次執行if(to.name !== 'about'){return {name:'about'}}//path跳轉if(to.fullPath !== '/about'){return '/about'}})
全局解析守衛
可以用router.beforeResolve注冊一個全局解析守衛，它在每次導航時都會觸發，解析守衛會在導航被確認之前、所有組件內守衛和異步路由組件被解析之后調用。意味著它會在所有都執行完畢就緒后被調用。
router.beforeResolve是獲取數據或執行任何其他操作（如果用戶無法進入頁面時你希望避免執行的操作）的理想位置。
router.beforeResolve(to=>{//返回false，路由不會跳轉，可以做權限校驗等return false})
全局后置鉤子
全局后置鉤子和守衛不同的是，這些鉤子不會接受next函數也不會改變導航的本身
router.afterEach((to,from,failure) => {console.log(to.fullPath)})
路由獨享的守衛
可以在路由上直接定義beforeEnter守衛。它只會在進入路由時觸發，不會因為改變路徑上的變量而觸發。可以傳入函數數組。
const routes = [{path:'/about/:id',compontent:About,beforeEnter:(to,from){//拒絕導航reture false}}]
組件內的路由配置API
可以為路由組件添加一下API
- beforeRouteEnter
- beforeRouteUpdate
- beforeRouteLeave
const About = {template:'...',beforeRouteEnter(to,from){// 在渲染該組件的對應路由被驗證前調用// 不能獲取組件實例this，因為此守衛執行時，組件實例還沒被創建},beforeRouteUpdate(to,from){//當前路由改變，但是該組件被復用時調用，比如/user/1，/user/2查詢的用戶信息不同，可以訪問this},beforeRouteLeave(to,from){//在離開渲染該組件的對應路由時調用，可以訪問組件實例thisconst answer = window,confirm('Do you want to leave?');if(!ansuer) return false}}
路由元信息
有時想把一些附加信息附加到路由上，比如過渡名稱
誰可以訪問路由等，這些都可以通過接受屬性對象的meta屬性來實現，并且它可以在路由地址和導航守衛上都被訪問到。
const routes = [{path:'/about',component:About,children:[{path:'new',component:PostNew,meta:{requiresAuth:false //可以在路由守衛中判斷這個字段，做邏輯處理}},{path:':id',component:PrivacyPost,meta:{requiresAuth:true}}]}]
