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-03-04 21:01:26

    window自带截屏功能

    我们习惯了QQ和微信截图,当我们没有打开微信和QQ的时候,我们想用截图怎么版,当然是,打开QQ和微信,哈哈?

  • 2020-03-05 13:12:54

    Markdown的css样式

    本样式在这个样式的基础上做了一些修改, 主要是对于表格和代码块以及一些细节的修改。 主要目的是用在chrome的扩展 Markdown Preview Plus中, 替换其内置的样式。 由于 Markdown Preview Plus对css文件大大小有要求(小于8K), 所以需要使用压缩后的 css 文件。 当然也可以作为一个单独的markdown样式来使用。

  • 2020-03-06 22:28:05

    git中submodule子模块的添加、使用和删除

    执行成功后,git status会看到项目中修改了.gitmodules,并增加了一个新文件(为刚刚添加的路径) git diff --cached查看修改内容可以看到增加了子模块,并且新文件下为子模块的提交hash摘要 git commit提交即完成子模块的添加