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();
   }


  • 精彩推荐

  • 2019-01-23 20:56:57

    YouTube视频爬虫-批量采集-低成本解决方案-技术难点和细节回顾

    对于我们这些国内玩家而言，实现youtube视频爬虫和批量采集有先天性的遗憾。起初，公司需要一大批的youtube视频，时长3分钟左右，720p下载的话，每视频30-50M左右。公司雇了一大批人，采购科学上网神器手工下载 ，无奈，效率之低令人发指。所以老板要我做爬虫自动采集，需求每天下载2000+个视频，视频存储需要提高国内访问速度，方便合作方的程序抓取我们的内容。 --------------------- 作者：ucsheep 来源：CSDN 原文：https://blog.csdn.net/ucsheep/article/details/81380342 版权声明：本文为博主原创文章，转载请附上博文链接！

  • 2019-01-24 16:11:39

    数据库去除重复记录

    如何删除数据库中重复的记录 一般情况下，数据库去重复有以下那么三种方法：

  • 2019-01-26 10:12:40

    一行代码让webview不加载图片

    最近项目中需要控制列表页和详情页图片资源的显示，列表页比较好做，详情页是用WebView来展示的，不太好控制图片资源的加载。在Google上找到了两个解决办法，跟大家分享一下！