使用keep-alive时。跳转去新路由又跳回来后数据变空

当使用 `keep-alive` 组件时，组件状态会被缓存，这通常可以提高应用程序的性能。但是，如果你的组件中的数据是从远程服务器获取的，并且在 `activated` 钩子函数中进行加载，那么在切换页面时，组件状态仍然会被缓存，而数据会被清空。

为了解决这个问题，你可以使用 `deactivated` 钩子函数来在组件离开缓存时清空数据。例如：

export default {
  data() {
    return {
      list: []
    }
  },
  activated() {
    // 从服务器获取数据
    this.getList()
  },
  deactivated() {
    // 离开缓存时清空数据
    this.list = []
  },
  methods: {
    getList() {
      // 获取数据
      // ...
      this.list = data
    }
  }
}

在这个示例中，当组件被激活时会从服务器获取数据并将其存储在 `list` 中。当组件离开缓存时，`deactivated` 钩子函数会将 `list` 清空。这样，当你跳转到其他页面并返回时，`activated` 钩子函数会重新获取数据并更新 `list`。

相关问题

keep-alive更新数据

在使用 keep-alive 组件时，如果需要更新数据，可以将需要更新的数据写在 activated 钩子函数中。activated 钩子函数会在 keep-alive 组件激活时调用，并且在服务器端渲染期间不会被调用。你可以在 activated 钩子函数中将上一个页面跳转的路由参数赋值给需要更新的数据。例如：

data() {
  return {
    data: ''
  }
},
activated() {
  // 将上一个页面跳转的路由的参数赋值给 data
  this.data = this.$route.query.id
}

这样，在每次页面被缓存后再次激活时，activated 钩子函数会被调用，从而更新数据。\[1\]\[2\]
#### 引用[.reference_title]
- *1* [关于被 keep-alive 缓存的组件不能更新数据的问题](https://blog.csdn.net/weixin_44939142/article/details/107071177)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [keep-alive](https://blog.csdn.net/Zhoujia1316/article/details/117449542)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]

vue-router和Keep-Alive 能同时使用么

可以同时使用。 Vue Router 是 Vue.js 官方提供的用于构建单页应用的路由管理器，而 Keep-Alive 是 Vue.js 提供的一个抽象组件，用于缓存组件实例，从而提高应用的性能。

在使用 Vue Router 进行路由跳转时，如果需要缓存某个组件的实例，可以将该组件包裹在 Keep-Alive 组件中。例如：

<keep-alive>
  <router-view></router-view>
</keep-alive>

这样，当用户从一个路由切换到另一个路由时，如果两个路由都包含同一个组件，该组件的实例将被缓存，从而避免了重复的创建和销毁。同时，Vue Router 还提供了一些钩子函数，可以在路由切换时控制 Keep-Alive 的缓存策略，例如：

- activated：当缓存的组件被激活时调用。
- deactivated：当缓存的组件被停用时调用。
- include：指定哪些组件应该被缓存。
- exclude：指定哪些组件不应该被缓存。