路由的缓存

在搭建 vue 项目时，有某些组件没必要多次渲染，所以需要将组件在内存中进行‘持久化’，此时 <keep-alive> 便可以派上用场了。 <keep-alive> 可以使被包含的组件状态维持不变，即便是组件切换了，其内的状态依旧维持在内存之中。在下一次显示时，也不会重现渲染。

<router-link>和<router-view>和<keep-alive>

主要 结合 Vue Router 配置 meta  true

1.keep-alive

<!-- template -->
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
//router配置
new Router({
　　routes: [
　　　　{
　　　　name: 'a',
　　　　path: '/a',
　　　　component: A,
　　　　meta: {
　　　　　　keepAlive: true
　　　　}
　　},
　　{
　　　name: 'b',
     path: '/b',
     component: B
   }
  ]
})

　　

<!-- 一个include解决了，不需要多写一个标签，也不需要在路由元中添加keepAlive了 -->
<keep-alive include='a'>
<router-view></router-view>
</keeo-alive>

　　

<!-- 逗号分隔字符串，只有组件a与b被缓存。这样使用场景变得更有意义了 -->
<keep-alive include="a,b">
<component :is="view"></component>
</keep-alive>
<!-- 正则表达式 (需要使用 v-bind，符合匹配规则的都会被缓存) -->
<keep-alive :include="/a|b/">
<component :is="view"></component>
</keep-alive>
<!-- Array (需要使用 v-bind，被包含的都会被缓存) -->
<keep-alive :include="['a', 'b']">
<component :is="view"></component>

　　

<template>
  <div>
    <h1>欢迎页</h1>
    <input type="text" name="" value=""><br>
    <router-link to="/">回到首页</router-link>
  </div>
</template>
 
<script>
export default {
  name: 'hello',
  //keep-alive钩子函数：组件被激活时调用
  activated() {
    console.log('欢迎页被激活');
  },
  //keep-alive钩子函数：组件消失，被缓存时调用
  deactivated() {
    console.log('欢迎页被缓存');
  }
}
</script>

　　

　　activated()：页面组件被激活时调用。即组件第一次渲染时会被调用，之后每次 keep-alive 激活时也会被调用。通常我们可以在这个方法中实现：每次进入页面的时候获取最新的数据。

　　只有组件被 keep-alive 包裹时，这两个函数才会被调用。如果作为正常组件使用，是不会被调用的。

 

在关于页（about.vue）路由离开  这个钩子函数中设置首页不缓存：

<template>
  <div>
    <h1>关于页</h1>
    <input type="text" name="" value=""><br>
    <router-link to="/">回到首页</router-link>
  </div>
</template>
 
<script>
export default {
  name: 'hello',
  //keep-alive钩子函数：组件被激活时调用
  activated() {
    console.log('首页被激活');
  },
  //keep-alive钩子函数：组件消失，被缓存时调用
  deactivated() {
    console.log('首页被缓存');
  },
  beforeRouteLeave(to, from, next) {
    //设置下一个路由的meta（即首页）
    to.meta.keepAlive = false;  //让首页不缓存，即刷新
    //to.meta.keepAlive = true;  //让首页缓存，即不刷新
    next();
  }
}
</script>

　　

　　

原文出自：www.hangge.com  转载请保留原文链接：https://www.hangge.com/blog/cache/detail_2132.html

 

 

参考： https://blog.csdn.net/seanxwq/article/details/79164565

          https://www.hangge.com/blog/cache/detail_2132.html