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-04-25 11:48:44

    Java泛型详解

    泛型是Java中一个非常重要的知识点,在Java集合类框架中泛型被广泛应用。本文我们将从零开始来看一下Java泛型的设计,将会涉及到通配符处理,以及让人苦恼的类型擦除。

  • 2018-05-05 20:31:52

    StringUtils就这1张图,必备(二)

    StringUtils是工作中使用最频繁的一个工具类,提供了大量丰富的字符串操作方法,下面是所有方法的一个蓝图:

  • 2018-05-06 00:41:36

    设置EditText不自动聚焦

    如果界面中有EditText的时候,用户打开界面的话EditText就会自动聚焦。如果想取消这种一打开界面EditText就聚焦效果,可在EditText的上级父容器中加入如下代码:

  • 2018-05-21 13:54:06

    laravel-nestedset:多级无限分类正确姿势

    Nested Set Model 是一种实现有序树的高明的方法,它快速且不需要递归查询,例如不管树有多少层,你可以仅使用一条查询来获取某个节点下的所有的后代,缺点是它的插入、移动、删除需要执行复杂的sql语句,但是这些都在这个插件内处理了!