Vue生命周期activated之返回上一页不重新请求数据操作

activated: 英文原意:使活动、触发

在Vue的生命周期函数中,这个好像用的不是特别多?(也许只是在我的工作中这个用的不多,或者说叫几乎不用这个)

一、需求

前不久在项目中有这样一个需求:

在订单页面的地址信息栏,默认通过接口填充了一个已经设置过的一个的默认地址,现在要跳转去地址列表重新选择一个地址并回填到订单页面的地址信息位置

二、尝试

常规操作:

我们通常会将通过接口请求数据的方法放在==created== 或者 ==mounted==这两个生命周期中的一个里面调用。

但是我们知道,不管是我们刚进入这个页面还是从其他页面返回这个页面,这些生命周期都会走一遍。

问题:

所以,即使你跳转到下级页面选好你所需的数据返回上一页时,你所回填的数据又被从接口请求回来的数据给覆盖了。。。,这并不是我们想要的效果!!!

三、使用keep-alive

不想让页面加载数据???当然可以,这时候==Keep-alive==登场了

vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗

1、缓存所有页面

如果你想缓存所有的页面,只需要修改下app.vue中的代码即可

// app.vue

  <template>
   <div id="app">
    <keep-alive >
     <router-view></router-view>
    </keep-alive>
    <tabBar/>
   </div>
  </template>

2、缓存部分页面

如果你想缓存部分页面,有两种方式:

(1)使用router.meta属性

app.vue

// app.vue

  <template>
   <div id="app">
    <keep-alive >
     <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
    <tabBar/>
   </div>
  </template>

router.js

{
   path: '/usermanage',
   name: 'usermanage',
   meta: {
    keepAlive: true, //该字段表示该页面需要缓存
   },
   component: resolve => require(['@/views/userManage/userManage'], resolve) // 路由懒加载
  },

(2)使用vue-router 2.0的新特性

2.0提供了include/exclude两个属性 可以针对性缓存相应的组件

app.vue

<keep-alive include="a,b">
  <router-view></router-view>
</keep-alive>

==注意==:上面代码中的a,b是需要缓存的组件的name属性值,不是路由的name值

使用keep-alive结论

当你第一进入需要缓存的页面后,页面数据被缓存下来,但是当你再次进入时,你会发现,页面的数据还是之前的数据。。。。这也不是我们想要的效果!!!!

四、activated配合keep-alive

首先,我们需要使用router.meta属性,修改需要缓存的组件路由如下

// keepAlive和isback这两个很重要!
{
   path: '/usermanage',
   name: 'usermanage',
   meta: {
    keepAlive: true, //该字段表示该页面需要缓存
    isBack: false, //用于判断上一个页面是哪个
    title: '人员管理'
   },
   component: resolve => require(['@/views/userManage/userManage'], resolve) // 路由懒加载
  },

然后修改需要缓存的组件中的代码(只放重点部分):

<script>
 export default {
  name: 'currentName',
  data() {
   return {

    isFirstEnter: false, //
   }
  },
  beforeRouteEnter(to, from, next) {
   if (from.name == 'nextName') { // 这个name是下一级页面的路由name
    to.meta.isBack = true; // 设置为true说明你是返回到这个页面,而不是通过跳转从其他页面进入到这个页面
   }
   next()
  },
  mounted() {

  },
  activated() {
   if (!this.$route.meta.isBack || this.isFirstEnter) {
    this.initData() // 这里许要初始化dada()中的数据
    this.getDataFn() // 这里发起数据请求,(之前是放在created或者mounted中,现在只需要放在这里就好了,不需要再在created或者mounted中请求!!)
   }
   this.$route.meta.isBack = false //请求完后进行初始化
   this.isFirstEnter = false;//请求完后进行初始化
  },
 }
</script>

大功告成

这样就实现了:从其他页面跳转到这个页面时会请求数据,当从下级页面返回这个页面时就不会重新请求数据

以上这篇Vue生命周期activated之返回上一页不重新请求数据操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • vue项目使用$router.go(-1)返回时刷新原来的界面操作

    在项目需求中,我们常常需要使用$router.go(-1)返回之前的页面,但是却发现,之前的界面,保持着上次跳转的状态,比如说:弹框未关闭之类的等等,..... 问题如下: 界面1 : 界面2使用$router.go(-1)返回上一次的界面 由于使用$router.go(-1)返回,导致之前的数据都保留,并未刷新原来的界面,如下:还是显示跳转前的弹框 解决方法1: 不要使用$router.go(-1),而是使用$router.push('某某某'),但是其实这种方法是不合理的,因为你可能跳转的页

  • 解决vue单页使用keep-alive页面返回不刷新的问题

    使用vue单页开发项目时遇到一个很恶心的问题:在列表页点击一条数据进入详情页,按返回键返回列表页时页面刷新了,用户体验非常差啊!!!查阅了一下相关问题,使用<keep-alive>解决这个问题,下面是我的使用心得. <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. 首先在App.vue页面上有下面一段代码,我们都知道这是页面渲染的地方 <router-view></router-view> 把这段代码改成

  • 解决vue做详情页跳转的时候使用created方法 数据不会更新问题

    大家在做项目的时候肯定会遇到携带某个参数跳转到详情页 然后取这个参数,下面是重点 刚开始我用cookie把这个参数存起来在详情页面取这个参数发现只有第一次取到的是正确的 你在回到父页面在点击进详情页发现取到的数据跟原来的一模一样根本没有发生改变(因为router跳转时是不会刷新页面的所以导致我取得值永远不能更新),我以为是cookie有问题了后来又用了query携带参数跳转,sessionStorage方法存取发现都不行, 看下图解决办法 我也不知道其中是什么原理 没搞明白 但是解决了问题了,看

  • Vue 路由切换时页面内容没有重新加载的解决方法

    第二次进入页面,页面路由参数已经改变,但是页面内容不会刷新. 问题原因:在组件mounted钩子中调用的刷新页面内容,但测试发现这个钩子没有被调用.后来发现App.vue中使用了<keep-alive>: <template> <div id="app"> <keep-alive> <router-view></router-view> </keep-alive> </div> </t

  • Vue生命周期activated之返回上一页不重新请求数据操作

    activated: 英文原意:使活动.触发 在Vue的生命周期函数中,这个好像用的不是特别多?(也许只是在我的工作中这个用的不多,或者说叫几乎不用这个) 一.需求 前不久在项目中有这样一个需求: 在订单页面的地址信息栏,默认通过接口填充了一个已经设置过的一个的默认地址,现在要跳转去地址列表重新选择一个地址并回填到订单页面的地址信息位置 二.尝试 常规操作: 我们通常会将通过接口请求数据的方法放在==created== 或者 ==mounted==这两个生命周期中的一个里面调用. 但是我们知道,

  • Vue生命周期和钩子函数的详解与经典面试题

    目录 1. vue生命周期 2.钩子函数 2.1 分为4大阶段8个方法: 2.2 初始化阶段 2.3 挂载阶段 2.4 更新阶段 2.5 销毁阶段 面试题: 总结 1. vue生命周期 一组件从 创建 到 销毁 的整个过程就是生命周期 Vue 实例从创建到销毁的过程,就是生命周期.也就是从开始创建.初始化数据.编译模板.挂载Dom→渲染.更新→渲染.卸载等一系列过程,我们称这是 Vue 的生命周期. 2.钩子函数 Vue 框架内置函数,随着组件的生命周期阶段,自动执行,特定的时间点,执行特定的操

  • 一篇文章带你吃透Vue生命周期(结合案例通俗易懂)

    目录 1.vue生命周期 1.0_人的-生命周期 1.1_钩子函数 1.2_初始化阶段 1.3_挂载阶段 1.4_更新阶段 1.5_销毁阶段 2.axios 2.0_axios基本使用 2.1_axios基本使用-获取数据 2.2_axios基本使用-传参 2.3_axios基本使用-发布书籍 2.4_axios基本使用-全局配置 3.nextTick和refs知识 3.0$refs-获取DOM 3.1$refs-获取组件对象 3.2$nextTick使用 3.3$nextTick使用场景 3.

  • vue生命周期和react生命周期对比【推荐】

    个人认为,react和vue的业务逻辑是差不多,vue在react上封装了更简洁的方法,使用起来更加的便捷,如:提供了便捷的指令(v-for,v-if,v-model),还提供了更多的属性(computed,watch),我还是比较喜欢用react的,更接近js原生,更容易于理解它. 一 vue的生命周期如下图所示(很清晰)初始化.编译.更新.销毁 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html> <h

  • 详细聊聊Vue生命周期的那些事

    目录 前言 一.Vue2中的生命周期 实例的生命周期 其它生命周期钩子 二.Vue3中的生命周期 Options API生命周期 Composition API生命周期 两个新的Vue3生命周期函数 最后 前言 如今学习Vue的人越来越多了,Vue框架或React框架的学习也成为开发了前端开发人员的必备技能,今天我们就来聊聊Vue中的生命周期函数,Vue中生命周期函数的参考价值很高,让我们来一起认识它吧~ 一.Vue2中的生命周期 实例的生命周期 在介绍生命周期之前,我们需要知道在Vue中要渲染

  • 聊聊vue生命周期钩子函数有哪些,分别什么时候触发

    目录 vue生命周期钩子函数 以下为详解版 生命周期mounted和activated使用.踩坑 activated mounted 踩坑 vue生命周期钩子函数 vue生命周期即为一个组件从出生到死亡的一个完整周期 主要包括以下4个阶段:创建,挂载,更新,销毁 创建前:beforeCreate, 创建后:created 挂载前:beforeMount, 挂载后:mounted 更新前:beforeUpdate, 更新后:updated 销毁前:beforeDestroy, 销毁后:destro

  • 详解Vue生命周期和MVVM框架

    目录 生命周期 与动态组件有关的两个特殊的钩子: 与组件异常捕获有关的一个钩子: 生命周期有哪些 生命周期 组件从开始到结束的全过程 创建阶段:beforeCreate.created挂载阶段:beforeMount.mounted 更新阶段:beforeUpdate.updated 组件从开始到结束的全过程 创建阶段:beforeCreate.created 挂载阶段:beforeMount.mounted 更新阶段:beforeUpdate.updated 销毁阶段:beforeDestro

  • Vue生命周期函数调用详解

    目录 生命周期 Vue.mixin 生命周期选项合并 调用生命周期函数 结语 生命周期 Vue为用户提供了许多生命周期钩子函数,可以让用户在组件运行的不同阶段书写自己的逻辑. 那么Vue内部到底是如何处理生命周期函数的呢?Vue的生命周期究竟是在代码运行的哪个阶段执行呢?本文将实现Vue生命周期相关代码的核心逻辑,从源码层面来理解生命周期. Vue.mixin 在介绍生命周期之前,我们先来看下Vue.mixin. Vue.mixin是Vue的全局混合器,它影响Vue创建的每一个实例,会将mixi

  • Vue生命周期实例分析总结

    目录 1. 概述 2. 页面钩子函数 3. 生命周期函数 1. 概述 每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如需要设置数据监听.编译模板.挂载实例到 DOM.在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数,给予用户机会在一些特定的场景下添加他们自己的代码. 简单来说,生命周期钩子函数就是一堆回调函数,在我们创建实例时,这些回调函数按顺序执行. 2. 页面钩子函数 名称 作用 beforeCreate 在实例初始化之后,数据观测和事件配置之前

  • 深入理解Vue生命周期、手动挂载及挂载子组件

    本文介绍了Vue生命周期和手动挂载,分享给大家,具体如下: 1.vue的生命周期: 2.$mount()手动挂载 当Vue实例没有el属性时,则该实例尚没有挂载到某个dom中: 假如需要延迟挂载,可以在之后手动调用vm.$mount()方法来挂载. 例如: 方法一: <div id="app"> {{name}} </div> <button onclick="test()">挂载</button> <scrip

随机推荐