【Vue】Vue路由加載（按需加載，異步加載，懶加載）和路由導航守衛

1，路由加載的幾種方式：

  1，基礎寫法，打包分離代碼：

    import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    Vue.use(Router)
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        }
      ]
    })

  2，按需加載，ES6的import()方法：

    import Vue from 'vue'
    import Router from 'vue-router'
    const HelloWorld = () => import('@/components/HelloWorld')
    Vue.use(Router)
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
　    　　// 或者直接 component: () => import("@/components/HelloWorld")
        }
      ]
    })

  3，異步按需加載，require()方法：

    import Vue from 'vue'
    import Router from 'vue-router'
    Vue.use(Router)
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: resolve => require(['@/components/HelloWorld'], resolve),
        }
      ]
    })

4，異步組件+webpack的ensure()方法：

    import Vue from 'vue'
    import Router from 'vue-router'
    const HelloWorld = r => require.ensure([], () => r(require('@/components/HelloWorld')),     'HelloWorld')
    Vue.use(Router)
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        }
      ]
    })

 5，懶加載（最優官方），打包分離代碼：

    import Vue from 'vue'
    import Router from 'vue-router'
    Vue.use(Router)
    export default new Router({
      routes: [
         {
           path: '/',
           name: 'HelloWorld',
           component: () => import(/* webpackChunkName: "HelloWorld" */ '@/components/HelloWorld')
         }
      ]
    })

  參考：https://www.cnblogs.com/HeighWord/p/11452032.html

 

2，路由導航守衛：

 1，全局守衛：
     1）全局前置守衛：router.beforeEach(to,from,next)
     2）全局解析守衛：router.beforeResolve(to,from,next)
     3）全局後置鉤子：router.afterEach(to,from)

     參數解析：
        to:Route，即將要進入的目標路由對象；
        from:Route，當前導航正要離開的路由；
        next:Function，決定是否展示你要看到的路由頁面
           next()：進行管道中的下一個鉤子，執行完，即將路由狀態置爲confirmed（確認的）
           next(false)：中斷當前的導航。如果瀏覽器的URL改變了（可能是用戶手動或者瀏覽器後退按鈕)，那麼URL地址會重置到 from 路由對應的地址
           next(‘/’)或next({ path: '/' })：跳轉到一個不同的地址。當前的導航被中斷，然後進行一個新的導航。可以傳參；
           next(error)：導航會被終止且該錯誤會被傳遞給 router.onError() 註冊過的回調。

2，路由獨享的守衛 ：
     beforeEnter：(to,from,next)，寫在路由配置中，只在改路由下起作用；

3，組件內的守衛：
    1）beforeRouteEnter (to,from,next)：不能訪問this，因爲守衛在導航確認前被調用,因此即將登場的新組件還沒被創建。可以通過回調獲取；
    2）beforeRouteUpdate (to,from,next)：在當前路由改變，但是該組件被複用時調用，可以訪問this；
    3）beforeRouteLeave(to,from,next)：導航離開該組件的對應路由時調用；通常用來禁止用戶在還未保存修改前突然離開。該導航可以通過 next(false) 來取消

4，完整的導航解析流程：,
   1，導航被觸發。
   2，在失活的組件裏調用離開守衛（beforeRouteLeave）。
   3，調用全局的 beforeEach 守衛。
   4，在重用的組件裏調用 beforeRouteUpdate 守衛 (2.2+)。
   5，在路由配置裏調用 beforeEnter（路由獨享）。
   6，解析異步路由組件。
   7，在被激活的組件裏調用 beforeRouteEnter（組件內-進入守衛）。
   8，調用全局的 beforeResolve 守衛 (2.5+)。
   9，導航被確認。
   10，調用全局的 afterEach 鉤子。
   11，觸發 DOM 更新。
   12，用創建好的實例調用 beforeRouteEnter 守衛中傳給 next 的回調函數。