7***@qq.com
7***@qq.com
  • 发布:2022-04-27 15:29
  • 更新:2024-05-04 15:41
  • 阅读:2923

uni-app 路由緩存怎么实现?H5端 是否能支持页面的keep-alive呢?

分类:uni-app

我使用vue-develop-tool 调试时,发现uniapp源码 H5 是使用router-view + keep-alive 的 。
后台管理系统的多标签页面,怎么使用路由缓存?
是否目前有什么方案?
如果没有希望官方能 给pages.json里设置个参数支持缓存?
类似下面

{  
            "path": "pages/sys-mgr/resource/index",  
            "style": {  
                "navigationBarTitleText": "资源管理"  
            }  
           //#ifdef H5   
           ,  
           keepAlive:true  
           //#endif  
}
2022-04-27 15:29 负责人:无 分享
已邀请:
DCloud_UNI_WZF

DCloud_UNI_WZF

keep-alive 只支持 H5 端,使用参考如下代码:

<template>  
    <view>  
        <keep-alive :include="componentsName">  
            <component :is="componentsName[currentComponentIndex]"></component>  
        </keep-alive>  
        <button type="primary" @click="changeComponent">changeComponent</button>  
    </view>  
</template>  
<script>  
    import Foo from '../../components/Foo.vue'  
    import Bar from '../../components/Bar.vue'  
    export default {  
        components: {  
            Foo,  
            Bar  
        },  
        data() {  
            return {  
                componentsName: ['Foo', 'Bar'],  
                currentComponentIndex: 0  
            }  
        },  
        methods: {  
            changeComponent() {  
                this.currentComponentIndex = !this.currentComponentIndex * 1  
            }  
        }  
    }  
</script>  
  • 7***@qq.com (作者)

    是的,但 好像只支持组件级别的缓存,不能用于页面级别的缓存吧

    2022-07-14 09:52

  • DCloud_UNI_WZF

    回复 7***@qq.com: uni-app 默认有页面级缓存,即A打开B,B回退到A,A是有缓存的,但是跳转到A,A是重新打开的

    2022-07-14 09:54

  • 7***@qq.com (作者)

    回复 DCloud_UNI_WZF: 回退是有缓存,但A、B、C互相跳转,就没有缓存了

    2022-07-14 14:16

  • DCloud_UNI_WZF

    回复 7***@qq.com: 对,互相跳转这种是重新打开,所以没有缓存

    uni-app 目前做不到 vue+vue-router 那种页面缓存

    2022-07-14 14:26

  • 7***@qq.com (作者)

    回复 DCloud_UNI_WZF: 2023年2月16日再问一下,希望这个功能能支持上去,因为pc端后台管理类项目,基本都会有"多标签切换"这样的需求。不支持的话,uniapp就不太适合pc端了

    2023-02-16 14:36

  • 精软

    回复 7***@qq.com: 作者有解决这个问题么,您尝试过使用vuex缓存页面状态,然后跳转的时候把状态拿出来重新赋值的方法么

    2024-03-08 11:04

小小初学者

小小初学者

同问,这个问题很关键。多标签切换是做后台的常见功能

要回复问题请先登录注册