keep-alive 使用

编程之家收集整理的这篇文章主要介绍了keep-alive 使用编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

概述

一、基本使用需求:有两个页面(A 和 B),当我们在页面A的table列表中点击查看详情按钮,跳转到B页面,在B页面点击返回时,要定位到之前A的列表位置, 不能刷新该页面。在 <router-view /> 的外层包一个 keep-alive 如:<keep-alive include="pageA"> <router-view /></keep-alive>其中 include 为要缓存的页面,如果有多个页面可用逗号隔开,pageA为.,下方主要介绍关于keep-alive 使用的全文内容,希望对你有所帮助。

一、基本使用

需求:有两个页面(A 和 B),当我们页面A的table列表中点击查看详情按钮跳转到B页面,在B页面点击返回时,要定位到之前A的列表位置, 不能刷新该页面

在 <router-vIEw  /> 的外层包一个 keep-alive 如:

<keep-alive include="pageA">
 <router-vIEw />
</keep-alive>

其中 include 为要缓存的页面,如果有多个页面可用逗号隔开,pageA为页面A的name值,如

export default {
  name: "pageA",data () {
    return {}
   }
}

这样的话,页面跳转到 A 页面时,会缓存之前的数据,页面不会重新加载。

二、自定义刷新使用

使用 keep-alive 之前,先看下生命周期执行顺序:

1、不使用keep-alive时:beforeRouteEnter -> created -> mounted -> destroyed

2、使用keep-alive时:beforeRouteEnter -> created -> mounted -> activated -> deactivated

注:created,只有第一次进入或者刷新页面后才会执行此钩子函数使用keep-alive后(2+n次)进入不会再执行此钩子函数

需求:有A、B、C三个页面,A、C为项目的一级目录页(也就是左侧的menu菜单),B为详情页。现在是想在页面A点击详情按钮跳转页面B,再从页面B点击返回按钮回到页面A时,页面A数据不能重新加载刷新,但是从左侧目录页面C中跳转页面A的话需要刷新。代码如下:

1、首先在路由pageA的Meta添加是否缓存的标识 如:isKeepAlive,认为  true;

2、在router-vIEw 中加入 keep-alive , 设置 include ,指定缓存页面 A,用iskeepAlive判断是否是缓存,选择对应的router-vIEw

  <span>
     <keep-alive include="pageA">
        <router-vIEw :key="key" v-if="$route.Meta.iskeepAlive" />
     </keep-alive>
        <router-vIEw :key="key" v-if="!$route.Meta.iskeepAlive" />
  </span>

3、在页面A中的name属性赋值 pageA,和keep-alive中的include 一致 ,如:

export default {
  name: "pageA",data () {
    return {}
   },  beforeRouteEnter(to, from, next) {  //进来时判断
    if (from.Meta.Title == "pageB") {  //判断是否是从详情B页面返回到A页面
      to.Meta.iskeepAlive = true;   //是的话则缓存
    }
    next();
  },  beforeRouteLeave(to, next) {  //离开时判断
    if (to.Meta.Title== "pageB") {   //如果是去详情B页面,则返回时要缓存
      from.Meta.iskeepAlive = true;
    } else {  // 去C页面或者其他页面则 不缓存
      from.Meta.iskeepAlive = false;
    }
    next();
  },}

总结

以上是编程之家为你收集整理的keep-alive 使用全部内容,希望文章能够帮你解决keep-alive 使用所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

HTML文章

HTML邮件内容所在上下文或者说所在外部容器(以下简称环境)都是由邮箱服务商决定的,这就要求邮件内容需要在任何一种情况下都要正确显示。
HTML内容类型决定使用的语义标签,在网页中某种类型的内容必定需要某种特定的HTML标签来承载,也就是我们常常提到的根据你的内容语义化HTML结构。
HTML代码在书写的时候应该遵循什么规范?青岛星网今天跟大家分享:HTML的代码格式规范,希望大家都可以写出高质量的HTML代码。
青年码农 一个码农运营的公众号,佛系更新。 139篇原创内容 ...
better-scroll实现左侧导航点击,右侧内容滚动,或者右侧内容滑动,左侧导航联动
一、基本使用需求:有两个页面(A 和 B),当我们在页面A的table列表中点击查看详情按钮,跳转到B页面,在B页面点击返回时,要定位到之前A的列表位置, 不能刷新该页面。在 &lt;router-view /&gt; 的外层包一个 keep-alive 如:&lt;keep-alive include="pageA"&gt; &lt;router-view /&gt;&lt;/keep-alive&gt;其中 include 为要缓存的页面,如果有多个页面可用逗号隔开,pageA为.
WebviewObjectWebview窗口对象,用于操作加载HTML页面的窗口属性id:webview窗口的标识方法:监听addEventListener添加事件监听器wobj.addEventListener( event, listener, capture );参数说明:event: ( WebviewEvent ) 必选 Webview窗口事件类型liste...
1、Android调用H5(JS)1.1、新建assets资源目录并将准备好的HTML页面放入其中(真实项目中HTML页面放在Tomcat中启动)1.2、初始化webView并加载HTML页面 @SuppressLint({"SetJavaScriptEnabled", "AddJavascriptInterface"}) public void initWebView() { //可以加载网页和自定义浏览器 webView = new W
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注