【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 的回调函数。