vue 返回不刷新,vue刷新当前页面页面不跳转
本文主要介绍vue返回上一页时不刷新的问题及解决方法，有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。
目录
返回上一页时不要刷新前景。当你返回页面时，不要刷新问题。描述问题并解决它。
返回上一页面时不刷新
前景
在日常使用中，我们经常需要在不刷新页面、保持页面不变的情况下返回上一页。这里，我们需要使用以下方法：
思路
因为vue是单页应用，在进入其他页面时会破坏页面，keep-alive是用来防止刷新的。具体实现如下：
(1).在App.vue中加入
这里是所有页面切换的地方，下面的代码针对不同的设置采用不同的渲染方式。
模板
div id=应用程序
！-路由器-视图/-
！-页面返回而不刷新-
点火电极
路由器视图v-if= $ route . meta . keepalive /路由器视图
/保持活力
路由器-查看v-if=！$ route . meta . keepalive /router-view
/div
/模板
(2).index.js页面
在需要设置不刷新的页面中，添加keepAlive: true即可。
导出默认新路由器({
路线：[{
路径：“/”，
名称：“索引”，
组件：索引，
元：{
keepAlive:真
}
},
至此，实现了不刷新返回上级页面的功能：因为在index.vue中，mounted方法只走一次，在浏览器上实现了返回原来滚动位置的目的。
说明
备注：通常，在执行最后一步时，该方法已经实现。如果在手机上测试发现没用：可以尝试添加以下代码试试看：
//记录页面离开时的滚动位置
beforeRouteLeave(收件人、发件人、下一个){
this . scroll top=document . document element . scroll top document . body . scroll top
下一个()
},
//进入此页面时，用之前保存的滚动位置赋值。
beforeRouteEnter(收件人，发件人，下一个){
接下来(虚拟机={
document . body . scroll top=VM . scroll top
})
},
此时，完美结局是一个相对常见和简单的函数。
页面回退后，不刷新问题
问题描述
索引页中有一个项目列表，带有一个[添加]按钮。点击后跳转到新页面addNewInfo.vue保存新记录后，跳转回索引页面，此时不能刷新索引中的项目列表。
查询方法已添加到索引中已创建、已挂载的挂钩中，无法触发。
已创建(){
this.queryHandler()
},
已安装(){
this.queryHandler()
}
问题解决
询问问题后得知，解决问题有两种方法。
使用激活的挂钩功能监视这一点。$route两种方式都可以解决问题，但我更喜欢第一种，简单方便。
激活，顾名思义就是激活，即进入页面后立即触发。但是，有一个前提，官网API文档中有说明：
当激活由keep-alive缓存的组件时调用
当前项目使用的vue-element-admin框架已经在框架的AppMain.vue中的router-view外层包含了keep-alive:
模板
section class=app-main
过渡名称=渐变-变换模式=出-入
keep-alive:include= cache dviews
路由器视图：key=key /
/保持活力
/过渡
/部分
/模板
所以目前所有组件都被keep-alive缓存，满足activated的激活条件。试了一下真的很管用。
已激活(){
this.queryHandler()
}
API官方文件：https://cn.vuejs.org/v2/api/#activated
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。