vue如何监听页面缓存事件

我们可以通过Vue的生命周期函数来监听页面缓存事件，其中包括 beforeRouteLeave 和 beforeRouteEnter 这两个函数。

beforeRouteLeave

beforeRouteLeave 是在Vue组件即将被离开路由时被调用的函数，我们可以在这个函数中做一些路由离开前的准备工作，比如保存一些数据、询问用户是否需要保存等。

示例一：保存数据

假设我们有一个编辑页面，在用户离开页面时需要保存已修改的数据。

<template>
  <div>
    <label>姓名：</label>
    <input type="text" v-model="name">
    <label>年龄：</label>
    <input type="number" v-model="age">
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      age: 0
    };
  },
  beforeRouteLeave(to, from, next) {
    // 保存数据到本地存储
    localStorage.setItem('formData', JSON.stringify(this.$data));
    next();
  }
}
</script>

在这个示例中，我们在 beforeRouteLeave 中将组件中的数据保存到本地存储中，以便在用户返回并重新打开页面时恢复数据。调用 next() 函数则代表用户可以离开此页面，否则路由将被阻止。

示例二：询问用户是否保存

假设我们有一个表单页面，当用户离开页面时需要询问用户是否保存修改的数据。

<template>
  <div>
    <label>姓名：</label>
    <input type="text" v-model="name">
    <label>年龄：</label>
    <input type="number" v-model="age">
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      age: 0
    };
  },
  beforeRouteLeave(to, from, next) {
    if (this.name || this.age) {
      if (confirm('是否保存修改的数据？')) {
        // 保存数据到本地存储
        localStorage.setItem('formData', JSON.stringify(this.$data));
      }
    }
    next();
  }
}
</script>

在这个示例中，我们在 beforeRouteLeave 中询问用户是否保存数据，如果用户选择保存，则将数据保存到本地存储中，否则直接调用 next() 函数，允许用户离开此页面。

beforeRouteEnter

beforeRouteEnter 是在Vue组件进入路由时被调用的函数，我们可以在这个函数中做一些路由进入后的准备工作，比如从本地存储中恢复数据、获取一些必要的参数等。

示例一：恢复数据

假设我们有一个编辑页面，在用户进入页面时需要将上次编辑的数据恢复。

<template>
  <div>
    <label>姓名：</label>
    <input type="text" v-model="name">
    <label>年龄：</label>
    <input type="number" v-model="age">
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      age: 0
    };
  },
  beforeRouteEnter(to, from, next) {
    const formData = JSON.parse(localStorage.getItem('formData'));
    if (formData) {
      next(vm => {
        Object.assign(vm.$data, formData);
      });
    } else {
      next();
    }
  }
}
</script>

在这个示例中，我们在 beforeRouteEnter 中从本地存储中获取数据，并且通过 next() 函数将数据传给组件实例。注意，在 next() 函数中需要将一个回调函数传给它，以便在组件实例被创建后才能操作组件实例中的数据。

示例二：检查登录状态

假设我们有一个需要登录的页面，当用户进入页面时需要检查用户是否已经登录。

<template>
  <div>
    <h1>欢迎访问会员页面</h1>
  </div>
</template>

<script>
export default {
  beforeRouteEnter(to, from, next) {
    const isAuthenticated = localStorage.getItem('isAuthenticated');
    if (isAuthenticated) {
      next();
    } else {
      next(false);
      // 重定向到登录页面
      window.location.href = '/login';
    }
  }
}
</script>

在这个示例中，我们在 beforeRouteEnter 中检查本地存储中是否有登录状态，如果已登录就调用 next() 函数，否则调用 next(false) 函数阻止路由，并且重定向到登录页面。