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


  • 精彩推荐

  • 2019-02-15 10:36:45

    将MP4转成m3u8

    网上很多垃圾文章推荐segmenter工具，但用的时候，3.5G的ts文件丢了一半的数据，于是想到了ffmpeg转。

  • 2019-02-19 10:01:55

    node下使用open模块在指定浏览器下打开url

    最近在做一个项目的过程中，得到一个远程二维码图片的url，需要扫码登录，每次都是在控制台发url打印出来，再复制粘贴到浏览器的地址栏中打开扫码，整个过程过于繁琐，于是想找一个模块，直接在node下，指定浏览器打开该图片。这样可以省不少事。

  • 2019-02-24 09:47:09

    解决Node.js的命令行输出中文乱码问题（也适用于Electron）

    ​一般我们的js文件都是试用utf8编码保存的，但是中文windows的命令行一般默认使用cp936编码（就是gbk），这样我们用js代码 console.log('中文');输出日志的时候，会发现输出的是乱码。 网上有提供一些解决方案，典型的就是用iconv或iconv-lite，把这些中文字符串先转成gbk再输出。 但是这个方案我试了多次，在win10的命令行下，utf8的字符串是成功转成了gbk字符串了（通过打印Buffer可以见到），但是输出还是乱码。