vue 实现返回上一页不请求数据keep-alive
常规操作:
我们通常会将通过接口请求数据的方法放在==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的更多相关文章
- vue router返回上一页
this.$router.go(-1) 不用router时,使用window.history.go(-1);
- vue 如何点击按钮返回上一页
1,vue 如何点击按钮返回上一页呢? 这是vue挂载的范围html代码 <div @click="goOff()">返回</div> 下面是点击返回的方法 ...
- vue项目中阻止浏览器返回上一页
vue项目中在某个页面阻止浏览器返回上一页,适用移动端.PC端. 使用场景例如: 首页 与 A页面 来回跳转,那样点击浏览器返回时也会来回跳转,本想当页面在首页的时候就不再返回了,所以这个时候 ...
- vue 返回上一页后,上一页由参数渲染的内容无法显示
思路1:将参数传递给第二个页面后,返回上一页时,再讲参数传回第一页(此方法适用于层级少的)(亲测有效) 思路2:将参数放到全局变量中(还未尝试过)
- vue单页面项目返回上一页无效,链接变化了,但是页面没有变化
在最近的项目中,返回上一页没有效果,经过好久的排查才发现问题,是路由守卫写法不规范导致. 在项目中用路由守卫做了登录拦截,没登录的跳转到登录页面.页面跳转和拦截都没问题,但是返回上一页就不行了,也没有 ...
- js通过sessionStorage实现的返回上一页
通常,我们都会使用比较熟悉的javascript:history.go(-1)来实现返回上一页,此种方法有一个问题就是返回上一页后不能刷新当前页面,给我们的开发带来了一定的不便,显然有时这种方法就不是 ...
- js中的referrer返回上一页使用介绍
js中的referrer的用法举例. js完整代码: <script language="javascript"> var refer=document.refer ...
- js中的referrer使用,返回上一页
js完整代码: <script language="javascript"> var refer=document. referrer ; document.g ...
- 移动端返回上一页,刚需!document.referrer 详解
返回上一页,在PC端我们可以使用:history.go(-1)或者history.back(),可以正常返回第一层.这样,我们不需要上一页的 url 具体是什么,只要使用 history 一般都没啥问 ...
随机推荐
- RestFramework之解析器
一.什么是解析器? 对请求的数据进行解析 - 请求体进行解析. 解析器在你不拿请求体数据时 不会调用. 安装与使用: https://www.django-rest-framework.org/ 官方 ...
- TLS1.3对CIP的影响(对密码套件的解释)
1.术语定义的即使(算法)Definition of terms (optional) Cipher Suite :通信数据保护规范,对TLS指定对端身份验证,关键技术机制,后续数据加密和数据验证机 ...
- 文件读写(二)利用SteamReader和StreamWrite类处理字符串、FileSystemWatcher、BinaryReader/BinaryWriter
一.读写类: TextReader/TextWriter:文本读写,抽象类 TextReader,其派生类: StreamReader:以一种特定的编码从字节流中读取字符. StringReader: ...
- vue 自定义事件
- 1. let与const
1.ES6 新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. var a = []; for (var i = 0;i<10;i++) ...
- 011——C#创建ecxel文件(附教程)
(一)参考文献:[C#]创建表格(.xlsx)的典型方法 (二)视频教程:https://v.qq.com/x/page/t30068qfex5.html (三)下载地址:https://downlo ...
- javaweb+上传大文件
我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用. 这次项目的需求: 支持大文件的上传和续传,要求续传支持所有浏览器,包括ie6,ie7,i ...
- bzoj 2563: 阿狸和桃子的游戏 贪心
这个真的好巧妙啊~ 如果只考虑点权的话显然直接按照权值大小排序即可. 但是加入了边权,就有了一个决策的问题. 于是,我们将边权分一半,分给两个端点. 如果一个人拿了两个端点,则边权都会加上. 否则,边 ...
- [转][c++11]我理解的右值引用、移动语义和完美转发
c++中引入了右值引用和移动语义,可以避免无谓的复制,提高程序性能.有点难理解,于是花时间整理一下自己的理解. 左值.右值 C++中所有的值都必然属于左值.右值二者之一.左值是指表达式结束后依然存在的 ...
- start django project
1.django-admin startproject helloword 创建项目helloword 2.开始一个app,写一个hello worldpython manage.py startap ...