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-05-07 13:42:13

    场景切换的集合移动,旋转,淡入淡出等

    两个场景(即两个div视图)切换的时候,如果想添加个过渡动画,除了可以使用js来实现,还可以通过CSS3的animation属性来实现。 (注意:Internet Explorer 9 以及更早的版本不支持 animation 属性。)

  • 2020-05-07 13:43:02

    css模拟开关按钮

    之前我们为大家分享过很多款各式各样的CSS3开关切换按钮,很多还是非常富有创意的,比如这里的多组超具创意的CSS3开关切换按钮和纯CSS3灯光开关动画。今天我们要带来另外一款外观很漂亮的纯CSS3开关切换按钮动画,它模拟了电灯的开关,并且在开和关之间切换时按钮的背景会有不同的变化,看起来非常不错。

  • 2020-05-07 18:40:35

    CSS让页面平滑滚动

    凡是需要滚动的地方都加一句scroll-behavior:smooth就好了!

  • 2020-05-12 10:17:07

    createElementNS和createElement区别

    指定与元素相关联的命名空间URI的字符串。创建的元素的namespaceURI属性使用namespaceURI的值进行初始化。 参见有效的命名空间URL。

  • 2020-05-13 09:37:50

    transform-origin(变形原点) 怎么用

    transform-origin是变形原点,也就是该元素围绕着那个点变形或旋转,该属性只有在设置了transform属性的时候起作用