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-12-07 22:19:33

    修改 Nginx 进程最大可打开文件数（worker_processes和worker_connections）

    worker_processes：操作系统启动多少个工作进程运行Nginx。注意是工作进程，不是有多少个nginx工程。在Nginx运行的时候，会启动两种进程，一种是主进程master process；一种是工作进程worker process。例如我在配置文件中将worker_processes设置为4，启动Nginx后，使用进程查看命令观察名字叫做nginx的进程信息，我会看到如下结果：

  • 2018-12-07 22:55:02

    nginx worker_processes 配置

    据另一种说法是，nginx开启太多的进程，会影响主进程调度，所以占用的cpu会增高， 这个说法我个人没有证实，估计他们是开了一两百个进程来对比的吧。

  • 2018-12-08 11:44:26

    php 时间函数strtotime 使用详解

    这篇文章介绍的内容是关于php 时间函数strtotime 使用详解 ，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

  • 2018-12-09 15:52:37

    【Android - 进阶】之Animator属性动画

    在3.0系统之前，Android给我们提供了逐帧动画Frame Animation和补间动画Tween Animation两种动画： 逐帧动画的原理很简单，就是将一个完整的动画拆分成一张张单独的图片，然后将它们连贯起来进行播放； 补间动画是专门为View提供的动画，可以实现View的透明度、缩放、平移和旋转四种效果。