vue详情页跳转列表页时列表页不刷新，使用＜keep-alive＞

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方法平级。