vue 页面回退后，不刷新问题

【问题描述】

index页面中呈现一个item列表，有一个【新增】按钮，点击后，跳转到了新增页面addNewInfo.vue, 保存了新增记录后，跳转回到index页面，此时index中的item列表不能刷新。

在index中的created, mounted钩子中添加了查询方法，无法触发

created() {
	this.queryHandler()
},
mounted() {
	this.queryHandler()
}

【问题解决】

查询了该问题后，得知有两种方式可以解决该问题

• 使用activated钩子函数
• watch中添加对this.$route的监听

两种方式均可以解决问题，但是个人偏爱第一种，简单方便

activated顾名思义是激活，也就是进入页面后立即触发，然而有个前提，如官网API文档所说：

被 keep-alive 缓存的组件激活时调用

当前项目使用的vue-element-admin框架，在框架中的AppMain.vue中已经在<router-view>外层包括了<keep-alive>：

<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in">
      <keep-alive :include="cachedViews">
        <router-view :key="key" />
      </keep-alive>
    </transition>
  </section>
</template>

因此所有的组件目前都是被keep-alive缓存的，符合activated的激活条件. 尝试后确实有效。

activated() {
	this.queryHandler()
}

	> 官方API文档：https://cn.vuejs.org/v2/api/#activated



-----------------
方法很简单，留下记录，作为积累，欢迎提问，欢迎一起探讨。