vue 一个页面设置keepalive一个页面不设置keepaive deactivated在mounted之前执行

在Vue中，使用`keep-alive`组件可以将指定的页面缓存起来，以便在切换时保留页面的状态，提高用户体验。现在有一个需求，需要在一个页面设置`keep-alive`，而另一个页面不设置，并且在设置了`keep-alive`的页面在`mounted`钩子执行前进行`deactivated`钩子的操作。

首先，在需要设置`keep-alive`的页面中，在组件上添加`<keep-alive>`标签，将需要缓存的内容放置在`<keep-alive>`标签内部，例如：

<template>
  <keep-alive>
    <div>
      ...页面内容...
    </div>
  </keep-alive>
</template>

接下来，在该页面的`Vue`实例中，添加一个`deactivated`钩子函数，实现在`mounted`之前执行的操作，例如：

<script>
export default {
  // ...
  deactivated() {
    // 在此执行需要在 mounted 之前执行的操作
    // ...
  },
  mounted() {
    // 在此执行页面 mounted 钩子的操作
    // ...
  }
}
</script>

对于不需要设置`keep-alive`的页面，直接在`<router-view>`标签中引入对应的组件即可。

这样，当从含有`keep-alive`的页面切换到其他页面时，`deactivated`钩子函数会在当前页面缓存之前执行。当再次切回含有`keep-alive`页面时，页面会从缓存中恢复，并执行`activated`钩子函数和`mounted`钩子函数。

通过以上步骤，我们实现了在一个页面设置`keep-alive`，而另一个页面不设置，并且在设置了`keep-alive`的页面在`mounted`钩子执行前进行`deactivated`钩子的操作。