Vue-Router数据获取仅一次

Question

我目前正在使用Vue路由器的beforeEnter挂钩来检索我的一条路线的数据。

{
    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. 将路由器视图包装在keep-alive元素内

2. 在组件的已安装挂钩中获取API：

   安装（）{this.data = loadData（）}

从理论上讲，即使路由器在路由器视图内切换组件，这也只能安装一次组件并保持其状态有效。

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