常规操作:

我们通常会将通过接口请求数据的方法放在==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) // 路由懒加载
},

三、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 实现返回上一页不请求数据keep-alive的更多相关文章

  1. vue router返回上一页

    this.$router.go(-1) 不用router时,使用window.history.go(-1);

  2. vue 如何点击按钮返回上一页

    1,vue 如何点击按钮返回上一页呢? 这是vue挂载的范围html代码 <div @click="goOff()">返回</div> 下面是点击返回的方法 ...

  3. vue项目中阻止浏览器返回上一页

    vue项目中在某个页面阻止浏览器返回上一页,适用移动端.PC端. 使用场景例如: 首页 与 A页面     来回跳转,那样点击浏览器返回时也会来回跳转,本想当页面在首页的时候就不再返回了,所以这个时候 ...

  4. vue 返回上一页后,上一页由参数渲染的内容无法显示

    思路1:将参数传递给第二个页面后,返回上一页时,再讲参数传回第一页(此方法适用于层级少的)(亲测有效) 思路2:将参数放到全局变量中(还未尝试过)

  5. vue单页面项目返回上一页无效,链接变化了,但是页面没有变化

    在最近的项目中,返回上一页没有效果,经过好久的排查才发现问题,是路由守卫写法不规范导致. 在项目中用路由守卫做了登录拦截,没登录的跳转到登录页面.页面跳转和拦截都没问题,但是返回上一页就不行了,也没有 ...

  6. js通过sessionStorage实现的返回上一页

    通常,我们都会使用比较熟悉的javascript:history.go(-1)来实现返回上一页,此种方法有一个问题就是返回上一页后不能刷新当前页面,给我们的开发带来了一定的不便,显然有时这种方法就不是 ...

  7. js中的referrer返回上一页使用介绍

    js中的referrer的用法举例. js完整代码:  <script language="javascript">  var refer=document.refer ...

  8. js中的referrer使用,返回上一页

    js完整代码: <script language="javascript"> var refer=document. referrer ;     document.g ...

  9. 移动端返回上一页,刚需!document.referrer 详解

    返回上一页,在PC端我们可以使用:history.go(-1)或者history.back(),可以正常返回第一层.这样,我们不需要上一页的 url 具体是什么,只要使用 history 一般都没啥问 ...

随机推荐

  1. Sql判断不为Null也不为空的写法

    看到不少人写: isnull(field,'')<>'' 其中这样写最经济实惠:field>''

  2. (三)java的数据类型

    java是一种强类型的语言,所谓强类型,意味着每个变量都要有确定的类型,每个表达式也要有明确的类型,包括传递的某些参数.java中从大的方面分有两大数据类型,分别是基本数据类型和引用数据类型,基本数据 ...

  3. Python prettytable的使用方法

    Python prettytable的使用方法 prettytable可以整齐地输出一个表格信息: +-----------+------+------------+----------------- ...

  4. HDU2083JAVA

    简易版之最短距离 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  5. Bootstrap之折叠(Collapse)插件

    学习资料:Bootstrap折叠(Collapse)插件 大家可能常见的都是类似: 这种的效果,小颖今天要给大家分享一个不一样的效果嘻嘻.铛铛铛铛........................... ...

  6. (转载)Java多线程入门理解

    转载出处http://blog.csdn.net/evankaka 写在前面的话:此文只能说是java多线程的一个入门,其实Java里头线程完全可以写一本书了,但是如果最基本的你都学掌握好,又怎么能更 ...

  7. 使用 ES.later 的装饰器作为 mixin

    原文链接:http://raganwald.com/2015/06/26/decorators-in-es7.html   在函数式 mixin 中,我们讨论了将功能糅合进 JavaScript 类中 ...

  8. GO语言系列(二)- 基本数据类型和操作符

    一.文件名 & 关键字 & 标识符 1.所有go源码以.go结尾 2.标识符以字母或下划线开头,大小写敏感 3._是特殊标识符,用来忽略结果 4.保留关键字 二.Go程序的基本结构 p ...

  9. Python中列表(list)、字典(dict)排序的程序

    Python3 中的排序,在 Sorting HOW TO 中已经讲得很清楚了.来个实际的例子,对下面的这个 list 依据创建时间排序: pages = [{'title': '十年学会程序设计', ...

  10. SQLServer中的cross apply和FOR XML PATH

    参考: FOR XML PATH:http://www.cnblogs.com/doubleliang/archive/2011/07/06/2098775.html cross apply:http ...