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-01-17 15:58:16

    java实现定时任务的三种方法

    在进行多线程编程中，比较重要也是比较困难的一个操作就是如何获取线程中的信息。大多数人会采取比较常见的一种方法就是将线程中要返回的结果存储在一个字段中，然后再提供一个获取方法将这个字段的内容返回给该方法的调用者。如以下的ReturnThreadInfo类：

  • 2018-01-18 11:26:53

    浅谈js运行机制(线程）

    从开始接触js时，我们便知道js是单线程的。单线程，异步，同步，互调，阻塞等。在实际写js的时候，我们都会用到ajax,不管是原生的实现，还是借助jQuery等工具库实现，我们都知道，ajax可以实现局部刷新，并且在请求处理时，任然可以响应用户的操作，比如点击事件。不是说js是单线程吗?这些都是怎么实现的？ 在阅读《深入理解Bootrap的源码》一书，在分析轮播组件(carousel.js)的源码时，作者对一句代码操作的注释引起了我的兴趣。

  • 2018-01-18 17:41:05

    Fatal error: Class 'Memcached' not found

    从别地方复制来了新的配置文件，包了这样的错误，因为我也是刚刚安装了php7,以为是php的问题，于是就根据网上的提示，安装memcached.dll包。