zoukankan      html  css  js  c++  java
  • VUE 解决单页使用keep-alive页面返回不刷新的问题

    情景:A、B、C 三个页面 , A是首页 B是列表页 C是详情页

    A每次进入B页面B每次都要刷新,

    C每次返回B页面B都不刷新还在原来的位置

    下面代码配置

    1.app.vue  <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。

        <keep-alive>
          <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <!-- 除了需要缓存的路由 还要创建一个非缓存路由的入口-->
        <router-view v-if="!$route.meta.keepAlive"></router-view>

    2.配置路由的地方配置全局keep-alive

    {
        path: "/funGoodsArea",
        name: "funGoodsArea",
        component: () => import("../views/activity/funGoodsArea.vue"), 
        meta: {
          title: "text",
          keepAlive: true
        }
      },

    3.在B的页面配置 beforeRouterLeave  ,其中funGoodsArea的路由

      //修改列表页的meta值,false时再次进入页面会重新请求数据。
      beforeRouteLeave (to, from, next) { 
        from.meta.keepAlive = false;
        next();
      },

    4.同样在C页面中配置 

      // 返回上一页路由不刷新问题
    beforeRouteLeave (to, from, next) {
        if (to.path == "/funGoodsArea") {
          to.meta.keepAlive = true;
        } else {
          to.meta.keepAlive = false;
        }
        next();
      },

    其中 beforeRouterLeave(to,from,next){}和methods平级的

  • 相关阅读:
    js前端分享功能
    git常用命令
    webstorm中.vue报错
    页面重绘重排
    浏览器渲染引擎总结
    javascript中的this总结
    cookie、session、sessionid 与jsessionid
    promise和Angular中的 $q, defer
    C++11之nullptr
    C++ 输入ctrl+z 不能再使用cin的问题
  • 原文地址:https://www.cnblogs.com/xiaoxiao2017/p/12692811.html
Copyright © 2011-2022 走看看