keep-alive 

  • 生命周期执行顺序:
  • 不使用keep-alive的情况:beforeRouteEnter --> created --> mounted --> destroyed
  • 使用keep-alive的情况:beforeRouteEnter --> created --> mounted --> activated --> deactivated
  • 使用keep-alive,并且再次进入了缓存页面的情况:beforeRouteEnter -->activated --> deactivated
  • Props

  • include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
  • exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
  • max - 数字。最多可以缓存多少组件实例。
  • 用法

<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在组件的父组件链中。

当组件在 <keep-alive> 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

主要用于保留组件状态或避免重新渲染。

使用keep-alive解决从列表页点进详情页后再返回到列表页不刷新,其他页面跳转到列表页,列表页刷新。

1. 根据是否需要缓存在App.vue中定义两个<router-view>

<!--  需要缓存的组件 -->
<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<!-- 不需要缓存的组件 -->
<router-view v-if="!$route.meta.keepAlive"></router-view>

 2.在router中定义需要缓存的路由组件 (添加keepAlive: true)

{
        path: "tree",
        redirect: "tree/home",
        component: nested,
        meta: { title: "故障树管理" },
        children: [
          {
            path: "main",
            component: () => import("@/views/manage/tree/main"),
            meta: {
              title: "故障树详细信息",
            }
          },
          {
            path: "home",
            component: () => import("@/views/manage/tree/home"),
            meta: {
              keepAlive: true,
              title: "故障树管理主页",
            }
          },
       ]
}

3.在列表页中设置keepAlive值为false ,这样从列表页跳转到其他页面时,列表页不会缓存。

 beforeRouteLeave(to, from, next) {
    from.meta.keepAlive = false;
    next();
  },

4.在详情页中判断to.path的值,如果要返回的页面是列表页,就设置列表页的keepAlive值为true,否则为false。此时只有从详情页返回到列表页,列表页才会不刷新。

 beforeRouteLeave(to, from, next) {
    if (to.path == "/manage/tree/home") {
      to.meta.keepAlive = true;
    } else {
      to.meta.keepAlive = false;
    }
    next();
  },

  methods:{
    //.....
  }

 注:beforeRouteLeave(to, from, next)方法与methods方法平级。

Logo

前往低代码交流专区

更多推荐