VUE -全局路由守卫、keep-alive组件缓存

导航守卫

正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有
很多方式植入路由导航中：全局的，单个路由独享的，或者组件级的。当一个导航触发时，全局前置守卫按照
创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于
等待中。 每个守卫方法接收两个参数：

-   to: 即将要进入的目标 用一种标准化的方式

-   from: 当前导航正要离开的路由 用一种标准化的方式

    // GOOD router.beforeEach((to, from, next) => 
    { if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' }) else next() })

keep-alive

keep-alive是vue中的内置组件，能在组件切换过程中将状态保留在内存中，
防止重复渲染DOM， keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们\
使用原则：当我们在某些场景下不需要让页面重新加载时我们可以使用keepalive。

        {
          path: 'list',
          name: 'itemList', // 列表页
          component (resolve) {
            require(['@/pages/item/list'], resolve)
         },
         meta: {
          keepAlive: true,
          title: '列表页'
         }
        }


<div id="app" class='wrapper'>
    <keep-alive>
        <!-- 需要缓存的视图组件 --> 
        <router-view v-if="$route.meta.keepAlive"></router-view>
     </keep-alive>
      <!-- 不需要缓存的视图组件 -->
     <router-view v-if="!$route.meta.keepAlive"></router-view>
</div>

         使用keep-active 会触发两个钩子函数

          // 当组件被激活的时候 为组件的菜单被点击的时候 触发
          activated(){
            console.log("我被激活")
          },
          // 当离开组件的时候触发
          deactivated(){
             console.log("激活然后离开")
          },
 
``