返回上一页面时不刷新
前景
思路
说明
页面回退后,不刷新问题
问题描述
问题解决
返回上一页面时不刷新 前景在日常使用的时候，我们经常需要返回上一级页面的时候，不刷新页面，保持页面不变，这里就需要使用以下方法：
思路因为vue是单页面应用，进入其他页面时会销毁该页面，用keep-alive不让其刷新，具体实现为：
(1).在App.vue中加入
这里是所有页面切换到地方，下面代码分别对不同的设置，采用不同的渲染方式。
<template>
<div id="app">
<!--<router-view/>-->
<!--页面返回不刷新-->
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template>
(2).index.js页面
在需要设置不刷新的页面中，只需要添加 keepAlive: true就可以。
export default new Router({
routes: [{
path: '/',
name: 'index',
component: index,
meta: {
keepAlive: true
}
},
至此返回上级页面不刷新功能实现：因为在index.vue中，mounted方法只走一次，在浏览器上实现了返回原来滚动位置的目的。
说明备注：一般执行完上一步的时候就已经实现方法了，如果在手机上测试，发现没用：可以试着添加下面的代码试一下：
//在页面离开时记录滚动位置
beforeRouteLeave (to, from, next) {
this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
next()
},
//进入该页面时，用之前保存的滚动位置赋值
beforeRouteEnter (to, from, next) {
next(vm => {
document.body.scrollTop = vm.scrollTop
})
},
至此完美结束，算是一个比较常见而且简单的功能了。
页面回退后,不刷新问题 问题描述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
以上为个人经验，希望能给大家一个参考，也希望大家多多支持易知道(ezd.cc)。
