vue返回上一页面不刷新

时间:2022-06-02 qq_39355295 人气:0

返回上一页面时不刷新

前景

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

思路

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

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

加载全部内容