zoukankan      html  css  js  c++  java
  • 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;    
          }        
    }    
    
  • 相关阅读:
    Android之绚丽的图片游览效果--有点像W7效果,透明的倒影,层叠的图片,渐变的颜色透明度
    小程序自定义弹出框
    从零学React Native之04自定义对话框
    ajax的content-download时间过慢问题的解决与思考
    小程序
    使用自定义视图的AlertDialog
    Android浮动按钮
    android 实现微信分享多张图片的功能
    AndroidUI多线程网络请求更新导致BUG
    ==比较时的坑
  • 原文地址:https://www.cnblogs.com/codexlx/p/12497077.html
Copyright © 2011-2022 走看看