vue3缓存页面keep-alive及路由统一处理详解

作者:敲代码的张杰 时间:2024-05-02 16:34:12 

目录
  • 一、前言

  • 二、使用

    • 1.vue2和vue3的不同

    • 2.页面某些数据不需要缓存

    • 3.动态设置keepAlive属性

    • 4.使用include,exclude配置需要缓存的组件

    • 5.部分页面过来需要缓存,部分页面过来需要刷新

    • 6.缓存只在一级路由生效

  • 总结

    一、前言

    当使用路由跳转到其他页面的时候,要求缓存当前页面,比如列表页面跳转到详情页面,需要缓存列表内容,并且保存滚动条位置,也有时候需要缓存的页面里面有部分内容不缓存,总之各种情况,下面就列举其中一些例子

    vue2和vue3的使用方式是不一样的

    created()方法和mounted()方法在页面初始化的时候会执行,如果缓存了页面,这两个方法都不会再执行,还有如果缓存了页面,vue2中的destroyed()和vue3中的unmounted()方法都不会执行

    activated()方法在每次进入页面都会执行

    二、使用

    1.vue2和vue3的不同

    vue2:


    <template>
    <div id="nav">
       <router-link to="/">Home</router-link> |
       <router-link to="/about">About</router-link>
     </div>
    <!-- vue2.x配置 -->
      <keep-alive>
       <router-view v-if="$route.meta.keepAlive" />
     </keep-alive>
     <router-view v-if="!$route.meta.keepAlive"/>
    </template>

    vue3:


    <template>
    <div id="nav">
       <router-link to="/">Home</router-link> |
       <router-link to="/about">About</router-link>
     </div>
     <!-- vue3.0配置 Component是固定写法-->
     <router-view v-slot="{ Component }">
       <keep-alive>
         <component :is="Component"  v-if="$route.meta.keepAlive"/>
       </keep-alive>
       <component :is="Component"  v-if="!$route.meta.keepAlive"/>
     </router-view>
    </template>

    route.js中配置:


    path: '/',
    name: 'Home',
    component: Home,
    meta:{
     keepAlive: true
    }

    效果:

    vue3缓存页面keep-alive及路由统一处理详解

    2.页面某些数据不需要缓存

    可以在activated()方法中处理需要部分刷新的逻辑


    ...
    需要部分刷新的数据:<input type="text" v-model="newStr" />
    ...
    data() {
     return {
       newStr: "2",
     };
    },
    mounted() {
     console.log("执行了mounted方法");
     this.newStr = "3";
    },
    activated() {
     console.log("执行了actived方法。。。");
     this.newStr = "4";
    }

    效果:

    vue3缓存页面keep-alive及路由统一处理详解

    3.动态设置keepAlive属性

    也可以在vue文件中设置keepAlive属性,实测只有在beforeRouteEnter()方法中添加才会生效,即进入页面的时候
    在Home.vue中添加:


     // 使用组件内守卫,对离开页面事件做一些操作
     // to为即将跳转的路由,from为上一个页面路由
     beforeRouteEnter(to, from, next) {
       to.meta.keepAlive = true;
       // 路由继续跳转
       next();
     }

    4.使用include,exclude配置需要缓存的组件

    在app.vue中配置:


    <router-view v-slot="{ Component }">
     <keep-alive include="testKA">
       <component :is="Component"/>
     </keep-alive>
    </router-view>

    其中,testKA对应某个组件的name:


    export default {
       name:'testKA',// keep-alive中include属性匹配组件name
       data() {return {}},
       activated() {
           // keepalive缓存的页面每次进入都会进行的生命周期
       },
    }

    此外,include用法还有如下:


    <!-- 逗号分隔字符串 -->
    <keep-alive include="a,b">
     <component :is="view"></component>
    </keep-alive>

    <!-- 正则表达式 (使用 `v-bind`) -->
    <keep-alive :include="/a|b/">
     <component :is="view"></component>
    </keep-alive>

    <!-- 数组 (使用 `v-bind`) -->
    <keep-alive :include="['a', 'b']">
     <component :is="view"></component>
    </keep-alive>

    exclude用法与include用法相同,代表不被缓存的组件。

    5.部分页面过来需要缓存,部分页面过来需要刷新

    描述:如有a,b,c三个页面,a->b时,b刷新页面,然后b->c,c->b时,b不刷新页面,再b->a,a->b时,b刷新页面。
    自测,只有配合vuex才能实现,但是缺点是,页面缓存的时候不执行activated()方法

    6.缓存只在一级路由生效

    如果需要在二级路由使用缓存,可以在一级路由中进行同样的配置

    store.js代码:


    state: {
     keepAlives:[]
    },
    mutations: {
     SET_KEEP_ALIVE(state,params) {
       state.keepAlives = params
     }
    },
    getters:{
     keepAlive:function(state){
       return state.keepAlives
     }
    }

    App.vue代码:


    <template>
     <div id="nav">
       <router-link to="/bbb">BBB</router-link> |
       <router-link to="/home">Home</router-link> |
       <router-link to="/about">About</router-link>
     </div>
     <router-view v-slot="{ Component }">
       <keep-alive :include="keepAlive">
         <component :is="Component"/>
       </keep-alive>
     </router-view>
    </template>
    <script>
     export default{
       computed:{
         keepAlive(){
           return this.$store.getters.keepAlive
         }
       }
     }
    </script>

    Home.vue代码:


    // 使用组件内守卫,对离开页面事件做一些操作
    // to为即将跳转的路由,from为上一个页面路由
    beforeRouteEnter(to, from, next) {
     next(vm=>{
       if(from.path == "/bbb"){
         vm.$store.commit("SET_KEEP_ALIVE",["Home"])
       }
     });
    },
    beforeRouteLeave(to, from, next) {
     if (to.path == "/about") {
       console.log("将要跳转/about页面...")
     } else {
       console.log("将要跳转非/about页面...")
       this.$store.commit("SET_KEEP_ALIVE",[])
     }
     // 路由继续跳转
     next();
    }

    效果:

    vue3缓存页面keep-alive及路由统一处理详解

    来源:https://blog.csdn.net/m0_37840862/article/details/120764072

    标签:vue3,缓存,keep-alive
    0
    投稿

    猜你喜欢

  • AJAX和DOM的运行经验

    2008-05-02 21:05:00
  • 人工智能(AI)首选Python的原因解析

    2021-03-23 16:04:12
  • JS字符串累加Array不一定比字符串累加快(根据电脑配置)

    2024-05-02 16:10:18
  • Python中常用的内置函数

    2023-01-06 08:15:30
  • Python如何使用ElementTree解析xml

    2023-02-05 07:22:06
  • 查找python项目依赖并生成requirements.txt的方法

    2021-11-27 20:41:43
  • 浅谈五大Python Web框架

    2023-12-10 07:33:25
  • PHP 引用的概念

    2023-11-14 21:24:28
  • Python3.5内置模块之os模块、sys模块、shutil模块用法实例分析

    2022-08-29 11:18:20
  • 基于Django框架利用Ajax实现点赞功能实例代码

    2022-01-29 02:35:38
  • Ubuntu 16.04/18.04 安装Pycharm及Ipython的教程

    2023-11-03 03:49:29
  • 基于Python实现随机点名系统的示例代码

    2023-05-05 20:53:52
  • Javascript 同时提交多个Web表单的方法

    2024-04-19 10:06:45
  • opencv模板匹配相同位置去除重复的框

    2022-03-09 04:06:14
  • javascript 事件对象 坐标事件说明

    2024-04-16 08:50:50
  • PHP实现的随机IP函数【国内IP段】

    2024-06-05 09:49:17
  • Windows安装Anaconda3的方法及使用过程详解

    2022-03-03 06:20:10
  • Python 安装第三方库 pip install 安装慢安装不上的解决办法

    2023-02-23 13:43:45
  • Go语言中int、float、string类型之间相互的转换

    2024-02-03 04:32:55
  • pandas的apply函数用法详解

    2022-05-09 11:41:16
  • asp之家 网络编程 m.aspxhome.com