这个东西呢，不太好表述。简单的说就是不让组件来来去去的被创建和被销毁。(＃￣～￣＃)

image.png

1.产生原因

  我们还是拿以前的例子。假设张三在 home 页面中点击了“消息”子内容；当张三点击别的页面后再重新回到 home 页面，就会发现原本在home 中点击的“消息”页面又回到了“新闻”页面。不懂没关系，看下面的动图 o(￣︶￣)o

无名氏.gif

2.基本原理

  首先小编得很负责人的告诉你，组件的创建和销毁是一个不断循环的过程，这点可以通过两个生命函数来验证 create 和 destroyed。不信你瞧╭(╯^╰)╮

//在 home.vue 页面添加两个生命函数
<script>
    // 声生命函数
    export default {
        name:'home',
        created(){
            // document.title="首页"
            console.log("home 被创建啦 ^_^")
        },
        destroyed(){
            console.log("home 被销毁了 o(╥﹏╥)o")
        }
    }
</script>

组件创建的循环过程.gif

  这也就是为什么张三离开首页之后，首页的子内容就由“消息”变成了“新闻”。每当张三离开的时候，将相当于重新创建了 home 页面，而 home 页面中默认的就是显示“新闻” 的内容。
  于是乎就有了下面的结论：只要组件不是新创建的，就能保持离开时的模样，而kepp-alive 就可以做到这一点。

3.使用步骤

其实 keep-alive 的使用很简单。只需要将 router-view 紧紧的抱在怀里就好了 (✿◡‿◡)

    <!-- index.js 页面 -->
<template>
    <div>   
        <button @click="HomeClick">首页</button>
        <button @click="AboutClick">关于</button>
        <button @click="UserClick">用户</button>
        <button @click="ProfileClick">档案</button>       
        <keep-alive>
            <router-view></router-view>
        </keep-alive>
    </div>  
</template>

keep-alive.gif

看到图，小编有两个消息要告诉你们。一个好消息，一个坏消息。
好消息就是：使用了keep-alive后，组件从始至终只创建了一次，而且没有被销毁。
坏消息就是：当张三第二次进去 home 页面时，home 页面显示的依旧是“新闻”的内容 o(╥﹏╥)o
待小编调试完bug 后再来续更...

image.png

4.activated / deactivated 生命函数

① 定义

  这两个函数是为了解决上面的bug。activated，译为“活跃”的，也就是当组件处于活跃状态时将会回调的生命函数。相反，deactivated就是组件处于不活跃的状态。

② 使用场景

  但是这两个生命函数并不是所有的场景都使用的。只有使用了 keep-alive 时才可以使用。

③ 应用场景

  这里主要用 activated 函数解决上面的bug，此外我们还需要另外一个工具：beforeRouteLeave。beforeRouteLeave 是导航守卫之一，意思就是在监听离开路由时的事情。
因此，对付上面那种胡搅蛮缠的bug，解决思路如下：
第一：删除嵌套路由
  bug 的产生是因为一开始在 home 的地址中就有嵌套的路由，即 URL 的地址不仅仅是 /home 而是/home/news 或者 /home/message 。所以我们要先对嵌套的路由进行处理。打开 index.js 在路由映射关系中有关嵌套路由的代码 children 内部删除注释掉的代码：

{
    path:'/h ome',
    component:Home,
    meta:{
            title:'首页'
    },
    children:[
        // {
        //  path:"",
        //  redirect:"new"
    // },
        {
            path:"new",
            component:HomeNews,
    },
         {
            path:"message",
            component:HomeMessage,
    }   
    ]
},

第二：获取相关路径
  既然我们不能在嵌套路由中使用类似“/home/new” 的路径，我们就先定义一个变量path 来存放在嵌套路由中的路径“/home/new”；
  然后使用 activated 生命函数，当 home 页面被激活的时候获取当前激活状态下的路径；
  最后使用 beforeRouteLeave 导航守卫，记录用户离开页面时的路径，并将该路径赋值给变量path，这样当用户再次进入到该页面时，就会使用离开后的路径。具体代码如下所示：

<script>
// home.vue 文件
    export default {
        name:'home',
        data (){
            return {
                    path:'/home/new'
            }
        },
        created(){
            document.title="首页"
            console.log("home 被创建啦 ^_^")
        },
        destroyed(){
            console.log("home 被销毁了 o(╥﹏╥)o")
        },
        activated() {
            this.$router.push(this.path)
        },
        beforeRouteLeave(to,from,next){
            this.path = this.$route.path;
            next();
        }
        
    }
</script>

然后就是万众瞩目的一刻(¯﹃¯)

keep-alive完美版.gif

成功！o(￣▽￣)ｄ

好啦，今天的小编也要下线啦，要养足精神上网课╮(╯▽╰)╭ 针对今天的文章做出如下的总结：

1.keepl-alive

  当用户离开某个组件的时候，不要让该组件频繁的被创建和频繁的被销毁

2.activeted 和 dectivated

  译为“活跃的/不活跃的”这两个生命函数只有在使用了keep-alive 才可以使用

image.png