常规操作:

我们通常会将通过接口请求数据的方法放在==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. RestFramework之解析器

    一.什么是解析器? 对请求的数据进行解析 - 请求体进行解析. 解析器在你不拿请求体数据时 不会调用. 安装与使用: https://www.django-rest-framework.org/ 官方 ...

  2. TLS1.3对CIP的影响(对密码套件的解释)

    1.术语定义的即使(算法)Definition of terms (optional) Cipher Suite  :通信数据保护规范,对TLS指定对端身份验证,关键技术机制,后续数据加密和数据验证机 ...

  3. 文件读写(二)利用SteamReader和StreamWrite类处理字符串、FileSystemWatcher、BinaryReader/BinaryWriter

    一.读写类: TextReader/TextWriter:文本读写,抽象类 TextReader,其派生类: StreamReader:以一种特定的编码从字节流中读取字符. StringReader: ...

  4. vue 自定义事件

  5. 1. let与const

    1.ES6 新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. var a = []; for (var i = 0;i<10;i++) ...

  6. 011——C#创建ecxel文件(附教程)

    (一)参考文献:[C#]创建表格(.xlsx)的典型方法 (二)视频教程:https://v.qq.com/x/page/t30068qfex5.html (三)下载地址:https://downlo ...

  7. javaweb+上传大文件

    我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用. 这次项目的需求: 支持大文件的上传和续传,要求续传支持所有浏览器,包括ie6,ie7,i ...

  8. bzoj 2563: 阿狸和桃子的游戏 贪心

    这个真的好巧妙啊~ 如果只考虑点权的话显然直接按照权值大小排序即可. 但是加入了边权,就有了一个决策的问题. 于是,我们将边权分一半,分给两个端点. 如果一个人拿了两个端点,则边权都会加上. 否则,边 ...

  9. [转][c++11]我理解的右值引用、移动语义和完美转发

    c++中引入了右值引用和移动语义,可以避免无谓的复制,提高程序性能.有点难理解,于是花时间整理一下自己的理解. 左值.右值 C++中所有的值都必然属于左值.右值二者之一.左值是指表达式结束后依然存在的 ...

  10. start django project

    1.django-admin startproject helloword 创建项目helloword 2.开始一个app,写一个hello worldpython manage.py startap ...