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


  • 精彩推荐

  • 2017-09-05 11:48:16

    Laravel 服务容器实例教程 —— 深入理解控制反转（IoC）和依赖注入（DI）

    容器，字面上理解就是装东西的东西。常见的变量、对象属性等都可以算是容器。一个容器能够装什么，全部取决于你对该容器的定义。当然，有这样一种容器，它存放的不是文本、数值，而是对象、对象的描述（类、接口）或者是提供对象的回调，通过这种容器，我们得以实现许多高级的功能，其中最常提到的，就是 “解耦” 、“依赖注入（DI）”。本文就从这里开始。

  • 2017-09-11 09:22:09

    nginx配置返回文本或json

    　有些时候请求某些接口的时候需要返回指定的文本字符串或者json字符串，如果逻辑非常简单或者干脆是固定的字符串，那么可以使用nginx快速实现，这样就不用编写程序响应请求了，可以减少服务器资源占用并且响应性能非常快

  • 2017-09-11 11:30:09

    linux 获取经过N层Nginx转发的访问来源真实IP

    通常情况下我们使用request.getRemoteAddr()就可以获取到客户端ip，但是当我们使用了nginx作为反向代理后，由于在客户端和web服务器之间增加了中间层，因此web服务器无法直接拿到客户端的ip，通过$remote_addr变量拿到的将是反向代理服务器的ip地址。如果我们想要在web端获得用户的真实ip，就必须在nginx这里作一个赋值操作，如下：

  • 2017-09-11 16:15:11

    Nginx日志管理

    通过访问日志，你可以得到用户地域来源、跳转来源、使用终端、某个URL访问量等相关信息；通过错误日志，你可以得到系统某个服务或server的性能瓶颈等。因此，将日志好好利用，你可以得到很多有价值的信息。