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

更新时间：2022年05月26日 10:52:38 作者：qq_39355295

这篇文章主要介绍了vue返回上一页面时不刷新问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

返回上一页面时不刷新

前景

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

思路

因为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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

降低vue-router版本的2种解决方法实例
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用,下面这篇文章主要给大家介绍了关于降低vue-router版本的2种解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-07-07
vue前端自适应布局实现教程(一步到位所有自适应)
自适应布局是一种根据不同的设备屏幕分辨率进行布局的方式,它为不同的屏幕分辨率定义了不同的布局,下面这篇文章主要给大家介绍了关于vue前端自适应布局实现的相关资料,需要的朋友可以参考下
2024-08-08
详解vue-cli中的ESlint配置文件eslintrc.js
本篇文章主要介绍了vue-cli中的ESlint配置文件eslintrc.js详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
vue用addRoutes实现动态路由的示例
本篇文章主要介绍了vue用addRoutes实现动态路由的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
vue.js全局API之nextTick全面解析
本篇文章主要介绍了vue.js全局API之nextTick全面解析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07
vue与iframe之间的信息交互的实现
这篇文章主要介绍了vue与iframe之间的信息交互的实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-04-04
Vue3之父子组件异步props数据的传值方式
这篇文章主要介绍了Vue3之父子组件异步props数据的传值方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2025-04-04
前端elementUI select选择器实现远程搜索
这篇文章主要为大家介绍了前端使用elementUI select选择器实现远程搜索，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-05-05
Vue通过URL传参如何控制全局console.log的开关详解
这篇文章主要给大家介绍了关于Vue根据URL传参如何控制全局console.log开关的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-12-12
一文详细聊聊vue3的defineProps、defineEmits和defineExpose
vue3官方文档defineProps和defineEmits都是只能在scriptsetup中使用的编译器宏,下面这篇文章主要给大家介绍了关于vue3的defineProps、defineEmits和defineExpose的相关资料,需要的朋友可以参考下
2023-02-02