使用vue钩子函数mounted,页面回退时不执行的问题

  本人近日做前端的后台管理系统项目，一个问题一直都没解决，就是页面中查看详情按钮第一次点击进去详情页可以被渲染，回退出来第二次进去钩子函数没有被执行，网上这类问题的解决方法并不多，一直以来都没解决，今天终于解决，特来记录下。

解决方法：

  activated 可以使用这个钩子函数

以下为具体分析：

html 部分

<template>
  <div class="app">
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

 

js 部分

.....
 
    created: function () {
      console.log(1)
    },
    mounted: function () {
      console.log(2)
    },
    activated: function () {
      console.log(3)
    },
    deactivated: function () {
      console.log(4)
    }
 
.....

 什么阶段获取数据

  页面生命周期钩子如上面的代码所示，这四个是最常用到的部分。这部分需要注意下，当引入keep-alive 的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。

我们知道 keep-alive 之后页面模板第一次初始化解析变成HTML片段后，再次进入就不在重新解析而是读取内存中的数据，即，只有当数据变化时，才使用VirtualDOM进行diff更新。故，页面进入的数据获取应该在activated中也放一份。数据下载完毕手动操作DOM的部分也应该在activated中执行才会生效。

所以，应该activated中留一份数据获取的代码，或者不要created部分，直接将created中的代码转移到activated中。