用 VUE 默认的 keep-alive 组件实现

保存页面的数据,页面显示就执行某个函数，页面隐藏就执行某个函数实现方式：

1.在路由内设置页面是否需要缓存；

示例代码：（在需要的组件里面添加meta 对象，keepAlive属性，keepAlive 的值为是否需要缓存组件）

    {
      path:'/UpInfo',
      name:'UpInfo',
      component:UpInfo,
      meta:{
        keepAlive:true
      }

2.在 app.vue 里面使用 router-view 组件；

在 APP.vue 里面 使用 keep-alive 把 router-view 包裹起来，并且判断是否在路由里面设置的是否需要缓存。

<template>
  <div id="app">
    <keep-alive>
      <router-view v-if='$route.meta.keepAlive'/>
    </keep-alive>
      <router-view v-if='!$route.meta.keepAlive'/>
  </div>
</template>
<script>
  export default {
    data() {
      return {
      }
    },
    methods: {},
    mounted() {
    }
  }
</script>
<style scoped />

3.页面显示就执行某个函数，页面隐藏就执行某个函数    —— 前提是在app.vue里面用 keep-alive 组件并且路由l里面的keepAlive 为true（如上一段代码）。

//info.vue
<template>
  <div id="info">
    我的info页面
  </div>
</template>
<script>
  export default {
    data() {
      return {
      }
    },
    methods: {},
    activated() {
      console.log('我这个页面显示就会执行');
    },
    deactivated: function () {
      console.log('我这个页面退出的会执行');
    },
    mounted() {
    }
  }
</script>
<style scoped />