zoukankan      html  css  js  c++  java
  • vue中如何缓存一些页面

    在vue中,有时候我们只想缓存页面中的一些组件或页面,这个时候怎么办呢,我们就需要用判断来加载keep-alive。
    例如:

    // router.js
            {
              path: "/driving_licence",
              component: () => DrivingLicence,
              meta: {
                isShowFooter: true,
                title: "驾照查分"
              }
            },
            {
              name: "ticket",
              path: "/ticket",
              component: () => Ticket,
              meta: {
                isShowFooter: true,
                title: "全国罚单查询",
                isKeep: true  // 用来记录当前页面是否要使用keep-alive
              }
            }
    
    // app.vue
    <template>
      <div id="app">
        <!-- 页面中使用两个router-view,其中一个使用keep-alive包裹,在给每个加上v-if属性即可 -->
        <keep-alive>
          <router-view v-if="$route.meta.isKeep"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.isKeep"></router-view>
      </div>
    </template>
    

    当引入keep-alive的时候,页面第一次进入,钩子的触发顺序created-> mounted-> activated,退出时触发deactivated。当再次进入(前进或者后退)时,只触发activated。我们就可以在不同的钩子函数内执行相关操作。

  • 相关阅读:
    微信redirect_uri 回调错误,scope权限错误
    对“空间数据库”的理解
    空间数据库2
    PostgreSQL和MySQL
    shp文件和地理数据库文件的区别
    分布式 空间数据库
    Git使用教程
    栅格投影
    mapnik渲染原理
    高斯消元——浮点数模板
  • 原文地址:https://www.cnblogs.com/georgeleoo/p/11864866.html
Copyright © 2011-2022 走看看