Vue-Router数据只获取一次

Question

我目前正在使用Vue Router的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

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

Answer 1

以下内容应根据vue和vue-router文档中的一些线索进行操作：

1. 将路由器视图包含在keep-alive元素中

     

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

   mounted（）{   this.data = loadData（） }

理论上，这应该只安装组件一次并保持其状态，即使路由器在路由器视图内切换组件也是如此。

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