vue返回上一页面时不刷新问题及解决方案 vue返回上一页面时不刷新问题

前景
思路
说明

页面回退后,不刷新问题

问题描述
问题解决

返回上一页面时不刷新
前景
在日常使用的时候，我们经常需要返回上一级页面的时候，不刷新页面，保持页面不变，这里就需要使用以下方法：

思路
因为vue是单页面应用，进入其他页面时会销毁该页面，用keep-alive不让其刷新，具体实现为：
(1).在App.vue中加入
这里是所有页面切换到地方，下面代码分别对不同的设置，采用不同的渲染方式。

(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.scrollTopnext()},

//进入该页面时，用之前保存的滚动位置赋值beforeRouteEnter (to, from, next) {next(vm => {document.body.scrollTop = vm.scrollTop})},

至此完美结束，算是一个比较常见而且简单的功能了。

页面回退后,不刷新问题
问题描述
index页面中呈现一个item列表，有一个【新增】按钮，点击后，跳转到了新增页面addNewInfo.vue, 保存了新增记录后，跳转回到index页面，此时index中的item列表不能刷新。
在index中的created, mounted钩子中添加了查询方法，无法触发