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-week-picker实现支持按周切换的日历

    vue-week-picker实现支持按周切换的日历

    这篇文章主要为大家详细介绍了vue-week-picker实现支持按周切换的日历,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-06-06
  • Vue实现点击按钮复制文本内容的例子

    Vue实现点击按钮复制文本内容的例子

    今天小编就为大家分享一篇Vue实现点击按钮复制文本内容的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vux uploader 图片上传组件的安装使用方法

    vux uploader 图片上传组件的安装使用方法

    这篇文章主要介绍了vux-uploader 图片上传组件的安装及使用方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-05-05
  • vue3 微信扫码登录及获取个人信息实现的三种方法

    vue3 微信扫码登录及获取个人信息实现的三种方法

    本文主要介绍了vue3 微信扫码登录及获取个人信息实现的三种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-03-03
  • Vue中简单的虚拟DOM是什么样

    Vue中简单的虚拟DOM是什么样

    这些年写前端vue时经常碰到虚拟DOM这个单词,但都是听到就算了,左耳进右耳出,知道有这么个东西就完了,因为感觉也没有影响我实现公司的产品业务逻辑。今天在这里想花点时间探讨下虚拟DOM相关的知识,给自己补补课
    2022-10-10
  • vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解

    vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解

    这篇文章主要介绍了vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • Vue封装DateRangePicker组件流程详细介绍

    Vue封装DateRangePicker组件流程详细介绍

    在后端管理项目中使用vue来进行前端项目的开发,但我们都知道Vue实际上无法监听由第三方插件所引起的数据变化。也无法获得JQuery这样的js框架对元素值的修改的。而日期控件daterangepicker又基于JQuery来实现的
    2022-11-11
  • van-uploader保存文件到后端回显后端接口返回的数据

    van-uploader保存文件到后端回显后端接口返回的数据

    前端开发想省时间就是要找框架呀,下面这篇文章主要给大家介绍了关于van-uploader保存文件到后端回显后端接口返回的数据,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • Vue源码解析之Template转化为AST的实现方法

    Vue源码解析之Template转化为AST的实现方法

    这篇文章主要介绍了Vue源码解析之Template转化为AST的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • 浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法

    浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法

    下面小编就为大家分享一篇浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03

最新评论