hash / history 原理及區別

原理

• hash 模式：用hash值模擬路由變化，通過監聽hashchange事件，動態更新頁面。

• history 模式：通過H5的pushState和resplaceState，這個兩個API 可以改變url，但是不會發送請求。

區別

• url 展示上，hash 模式有 "#"，

• 刷新頁面時，hash 模式可以正常加載到 hash 值對應的頁面，而 history 沒有處理的話，會返回 404，一般需要后端將所有頁面都配置重定向到首頁路由兼容性。

• hash 可以支持低版本瀏覽器和 IE。

路由守衛

1. 全局守衛：路由實例上直接操作的鉤子函數，即，所有路由都會觸發。

     const router = new VueRouter({ ... })
     router.beforeEach((to, from, next) => {
         // 守衛，守住底線
     })
   

   • beforeEach(to,from,next)：路由跳轉前觸發，常用于登錄驗證

   • beforeResolve(to,from,next)：與beforeEach類似，也在路由跳轉前觸發，區別在于，導航被確認之前，同時在所有組件內守衛和異步路由組件被解析之后，解析守衛就被調用（即在 beforeEach 和 組件內beforeRouteEnter 之后，afterEach之前調用）。

   • afterEach(to,from)：在路由跳轉完成后觸發，它發生在beforeEach和beforeResolve之后，beforeRouteEnter之前。

2. 路由守衛：在單個路由配置的鉤子函數

     const router = new VueRouter({
         routes:[{
             path:'/index',
             component:index,
             beforeEnter:(to,from, next) => {
                 // 隨便寫點什么了
             }
         }]
     })
   

   • beforeEnter(to,from,next)：與beforeEach完全相同，如果兩個都設置了，則此守衛后執行。

3. 組件守衛：在組件內執行的鉤子函數，類似于組件內的生命周期，相當于為配置路由的組件添加的生命周期鉤子函數。

   <script>
   export default{
      beforeRouteEnter (to, from, next) {
             // 我想不想一個鉤子？
      },
   }
   </script>
   

   • beforeRouteEnter(to,from,next)：組件實例創建前，不能調用this。

   • beforeRouteUpdate(to,from,next)：當前路由改變，組件被重復調用，可以使用this。

   • beforeRouteLeav(to,from,next)：導航離開該組件的對應路由時調用可以訪問組件實例 this

路由守衛