vue.js - Vue-Router 数据仅获取一次

Question

我目前正在使用 Vue Router 的 beforeEnter Hook 来检索我的其中一条路线的数据。

{
    path: '/A',
    beforeEnter: (to, from, next) => {
      loadData();
      next();
    },
}

流程的一个简单示例是:

Navigate to Route A --> Loading Data
Navigate to Route B
Navigate to Route A --> Loading Data again

如何防止第二次且过时的 API 调用？因为数据是否最新并不重要。 我可以这样做:if (!dataIsAlreadyThere) loadData()，但这对于许多路线来说并不好。还有其他解决方案或想法吗？

Answer 1

根据 vue 和 vue-router 文档中的一些线索，以下内容应该可以工作:

1. 将路由器 View 包装在 keep-alive 元素内

2. 在组件的已安装 Hook 中获取 API:

   安装 () { this.data = loadData() }

理论上，即使路由器在路由器 View 内切换组件，这也应该只挂载组件一次并保持其状态处于事件状态。

请注意，这不是 vuejs 或 vue-router 本身建议的首选方式。 Vue 建议使用外部状态管理，如 vuex .