账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue keepalive,缓存
    • 2018-02-26 00:00
    • 11
    30
    0

    路由配置:

    {
        path: '/submit',
        component: resolve => {
            require(['./pages/sb.vue'], resolve);
        },
        meta: {keepAlive: true}
    },

    app.vue配置

    <!-- 这里是需要keepalive的 -->
    <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    
    <!-- 这里不会被keepalive -->
    <router-view v-if="!$route.meta.keepAlive"></router-view>

    (因为我的代码比较长,复制了下别人的,基本情况是一样的)
    现在有这样一个情形:

    list_1和list_2是由同一个vue页面渲染出来的两个路由页面;detail_1是list_1的详情页;
    需要判断或者选择缓存的是list_1和list_2页面,详情页不进行缓存;
    
    list_1--detail_1;
    list_2--detail_2;
    
    情形1:从list_1跳转到detail_1,缓存list_1页面;浏览器返回list_1,调用缓存;正常。
    
    情形2:从list_1跳转到detail_1,缓存list_1页面;点击list_2,缓存list_2页面;再点击detail_2,浏览器返回list_2;此时页面显示的是list_1的数据,不正常。

    情形2怎么处理?缓存了两个页面,无法选择或销毁想要的缓存页面。

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • 漠名流眼泪 普通会员 1楼

      Vue Keepalive 是一个用于实现Vue应用程序长时间的在线连接的库。它使用Redis来存储应用程序的状态,当用户在应用程序之间断开连接时,Keepalive会自动将应用程序的状态保存到Redis中,以便在下次连接时自动恢复应用程序的状态。 使用 Keepalive 的好处是,可以极大地提高应用程序的稳定性,因为即使用户在应用程序之间断开连接,应用程序也可以自动恢复到上次连接时的状态。此外,使用 Redis 还可以节省服务器资源,因为 Redis 是一个在内存中存储数据的数据库,而不是在硬盘上存储数据。 要使用 Keepalive,你需要安装 Vue Keepalive 和一个 Redis 集成库,如 Redis-Snaps。然后,你可以使用以下代码在你的 Vue 组件中使用 Keepalive: ```javascript import Keepalive from 'vue-keepalive';

      Vue.use(Keepalive); ```

      在你的 Vue 组件中,你可以使用 keepalive 属性来启用 Keepalive,如下所示: ```javascript

      ```

      以上代码会在每次应用程序启动时启动 Keepalive,并在应用程序之间断开连接时自动恢复应用程序的状态。

    更多回答
    网站公告
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部