Vue keep-alive&路由守卫

一 keep-alive

缓存组件内容，避免组件反复加载，影响效率

（1）在路由中配置：

　添加meta:{keepAlive:true}

{
    path: '/',
    name: 'home',
    component: Home,
    meta:{
      keepAlive:true
    }
}

其中：keepAlive是自定义属性名，meta是用来专门保存自定义属性值的配置项

(2)  App.vue中：

　　如果当前路由需要缓存($route.meta.keepAlive==true)，就放在keep-alive包裹的一个router-view中；

　　如果当前路由不要缓存($route.meta.keepAlive==false)，就keep-alive外的一个router-view上。

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"/>
</keep-alive>
<router-view v-if ="!$route.meta.keepAlive"></route-view>

此时：这个页面带有keepAlive为true的路由对应的页面，只在首次请求时，加载一次，以后的后退跳转操作，都不再重新渲染内容。

 

二 路由守卫|路由钩子函数

在发生路由跳转时，自动执行的回调函数

 

如有需求：

　　　　当从首页进入搜索列表页时是第一次加载，需要从服务器进行加载；然后从搜索列表页进入详情页也是第一次加载。

　　　　但是当从详情页返回列表页，任然希望还是原来搜索到的商品，不需要从服务器加载，而是直接使用浏览器缓存的页面，此时需要keep-alive和路由守卫协同作用 

（1）首页进入商品列表页，不需要缓存，需要重新搜索：

index.vue（首页）中

beforeRouteLeave(to,from,next){
    console.log(`离开首页...`);
    //如果从首页跳到products
    if(to.name=="products"){
      to.meta.keepAlive=false;
    }
    next();
}

 products.vue（商品列表页）中：

beforeRouterLeave(to,from,next){
      console.log(`离开商品列表页`);
      if(to.name=="details"){
          //如果去的是商品详情页，就缓存当前页面
          from.keepAlive=true;      
      }
}        

 details.vue（商品详情页）中：

beforeRouterLeave(to,from,next){
      console.log(`路由离开详情页面`);
      if(to.name=="products"){
            // 如果去的是原来的商品列表页，就缓存当前的压面，下次进入这个访问过的商品就不用重新加载了
            to.meta.keepAlive=true;    
      }        
}