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


  • 精彩推荐

  • 2020-11-17 09:50:32

    android开发怎样让悬浮Activity只是隐藏而不销毁

    android在mainfest中给Activity添加一个属性 android:theme="@android:style/Theme.Dialog",可以使Activity悬浮在其它窗口上面，在布局中可以设置activity的大小，当点击悬浮Activity边缘以外区域时，Activity会消失，观察消失时其生命周期会发现执行了finish()方法从而执行了onDestroy方法。有时我们只是需要将Activity隐藏，并不销毁，此时可以重写finish方法,如下：

  • 2020-11-17 09:56:02

    uni-app直接用webiew打开本地js资源

    如果再结合activity不销毁，隐藏的方法，像里面传递参数，来改变页面，不销毁webview，我发现这样比原生的都要快。这样又能用于app端，又能生成小程序，何乐而不为

  • 2020-11-17 09:59:05

    在线图片取色器工具

    不知道为啥，现在idea的取色工具怎么都不好使了，给开发人员反映过，都一年了有没修复咋地。 网上搜到一个取色工具，把图片传上去，就可以点击取色。不错。