Vue路由开启keep-alive缓存页面

2019-12-14 21:02:45

mode:hash模式下：

HTML部分：

1
2
3
4
5
6
7
8
<template>
  <div id="app">
   <keep-alive>     <!--使用keep-alive会将页面缓存-->
    <router-view v-if="$route.meta.keepAlive"></router-view>
   </keep-alive> 
     <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

　路由部分：

1
2
3
4
5
6
7
8
{
    path: '/home',
    name: '首页',
    menuShow: true,
    iconCls: 'home_light.svg',
    component: Home,
    meta:{keepAlive:true}
}<br>页面部分：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//缓存页面
beforeRouteLeave(to, from, next) {   
   // 设置下一个路由的 meta
    to.meta.keepAlive = true; // B 跳转到 A 时，让 A 缓存，即不刷新（代码写在B页面）
    next();
   }
 
 
 
//不缓存页面
beforeRouteLeave(to, from, next) {   
   // 设置下一个路由的 meta
    to.meta.keepAlive = false; // B 跳转到 A 时，让 A 不缓存，即刷新（代码写在B页面）
    next();
   }


  • 精彩推荐

  • 2018-10-24 15:24:54

    getcachedir和getexternalcachedir的区别

    应用程序在运行的过程中如果需要向手机上保存数据，一般是把数据保存在SDcard中的。 大部分应用是直接在SDCard的根目录下创建一个文件夹，然后把数据保存在该文件夹中。 这样当该应用被卸载后，这些数据还保留在SDCard中，留下了垃圾数据。 如果你想让你的应用被卸载后，与该应用相关的数据也清除掉，该怎么办呢？

  • 2018-10-25 11:05:16

    SimpleDateFormat转换时间，12,24时间格式

    在使用SimpleDateFormat时格式化时间的 yyyy.MM.dd 为年月日而如果希望格式化时间为12小时制的，则使用hh:mm:ss 如果希望格式化时间为24小时制的，则使用HH:mm:ss

  • 2018-10-27 16:36:09

    关于 android 中 postDelayed方法的讲解

    当然，你也可以做一个闹钟提醒延时的函数试试，比如，先用MediaPlayer播放闹钟声音， 如果不想起，被停止播放之后，下次就5分钟后再播放，再被停止的话，下次就4分钟后播放，

  • 2018-10-27 17:24:45

    使用localstorage和预加载做到webview秒开

    提到网页加载速度优化，大家都会想到静态资源上CDN，CSS和JS文件合并，图片合并成雪碧图等常用手段；但是在某些特殊情况下这些常用方法也无法达到理想的效果。比如，在国际化场景下，很多国家还停留在2G网络阶段，无论如何优化，都无法避免过慢的网络请求。最近一直在做国际化(主要是印尼和泰国)背景下的webview性能优化，也算有一些经验。由于我们的产品是面向android用户的，而android手机对H5支持很好，因此我们主要是应用H5的新特性。