Vue缓存路由（keep-alive）以及新的生命周期

缓存路由

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

假设我们有登录，注册两个路由组件。登录组件切换到注册组件，登录组件的生命周期，从进入时的创建到离开时的销毁。当我们页面从注册组件切换回登录组件的时候。登录组件已经被销毁了，之前的数据是不会存在的。这是时候我们可以用keep-alive 来保存数据。

使用方式：在keep-alive里面放入要缓存的组件。

被keep-alive包裹的所有组件，都还不会销毁以及重新渲染。

来验证一下：

App.vue

<template>
  <div id="app">
    <keep-alive>
      <router-view/>
    </keep-alive>
  </div>
</template>

<style lang="scss">


</style>

注册组件：生成一个随机数，点击登录的时候，传递参数。

<template>
    <div>
        <el-card class="box-card" style="margin: 100px auto;text-align: center;width: 430px;">
            <div slot="header" class="clearfix" style="text-align: center;font-weight: bolder;font-size: 20px">
                <span>注册</span>
            </div>
            <el-input
                    prefix-icon="el-icon-user-solid"
                    style="width: 80%;margin-top: 20px"
                    type="text"
                    placeholder="请输入用户名"
                    v-model="userName"
                    show-word-limit
            >
            </el-input>
            <el-input prefix-icon="el-icon-lock" style="margin-top: 20px;width: 80%" placeholder="请输入密码" v-model="pwd" show-password></el-input>
            <el-button style="width: 51%;margin-top: 40px;" type="primary" @click="Regist">注册</el-button>
            <div style="margin-top: 20px">
                <button @click="toLogin">登录</button>
            </div>

        </el-card>
    </div>
</template>

<script>
    export default {
        name: "Regist",
        data(){
            return {
                userName:'',
                pwd:'',
                id:Math.random()
            }
        },
        methods:{
            Regist(){

            },
            toLogin(){
                this.$router.push({
                    path: '/Login',
                    query:{//传参
                        id:this.id
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>

登录组件：

<template>
    <div>
        <el-card class="box-card" style="margin: 100px auto;text-align: center;width: 430px;">
            <div slot="header" class="clearfix" style="text-align: center;font-weight: bolder;font-size: 20px">
                <span>登录</span>
            </div>
            <el-input
                    prefix-icon="el-icon-user-solid"
                    style="width: 80%;margin-top: 20px"
                    type="text"
                    placeholder="请输入用户名"
                    v-model="userName"
                    show-word-limit
            >
            </el-input>
            <el-input prefix-icon="el-icon-lock" style="margin-top: 20px;width: 80%" placeholder="请输入密码" v-model="pwd" show-password></el-input>
            <el-button style="width: 51%;margin-top: 40px;" type="primary" @click="login">登录</el-button>
            <div style="margin-top: 20px">
                <button @click="toRegist">注册</button>
            </div>

        </el-card>
    </div>
</template>

<script>
    export default {
        name:'Login',
        data(){
            return {
                userName:'',
                pwd:'',
            }
        },
        methods:{
            toRegist(){
                this.$router.go(-1)
            },
            login(){
                // localStorage.setItem('token','fdfjkdfjksdfdkf');
                this.$router.push('/index')
            }
        },
        created(){//接收参数，赋值给userName
            this.userName = this.$route.query.id
        },
        beforeDestroy(){
            console.log('我马上被销毁了');
        }
    }
</script>

<style scoped>

</style>

效果图：

第二次切换：

 

问题来了，这时候我们会发现，第一次和第二次传递过来的随机数是一样的。

原因是注册组件也被缓存起来了，并不会重新执行。所以传的随机数是一样的。

那有什么可以使注册组件不被缓存呢？这就需要用到include以及exclude属性

• include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
• exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
• 官方文档：API — Vue.js

代码：

<template>
  <div id="app">
    <!--include:匹配的组件会被缓存-->
    <!--注意：include的value值是组件的name值-->
    <!--如果router-view有多个组件都需要被缓存。可以使用数组的形式  :include="['Login','Regist']"  -->
    <!--exclude:匹配的组件都不会被缓存-->

    <keep-alive include="Login">
      <router-view/>
    </keep-alive>


    <!--<router-view/>-->
  </div>
</template>

<style lang="scss">


</style>

两个新的生命周期钩子

作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。只适用于keep-alive

activated ：路由组件被激活时触发。（当进入缓存的路由组件时触发）

deactivated：路由组件失活时触发。（当离开缓存的路由组件时触发）

使用方法：

接着上面的代码，我们之缓存了Login组件，Regist组件并没有被缓存。所以现在的效果是每次切换的随机数都不一致。

第一次切换：

 

 第二次切换：

 上面的效果图可以看出来，虽然每次传的参数都不一样，但是登录组件一直是都是保存第一次传过来的值。这是时候如果要同步注册组件传过来的参数。就需要用到activated这个生命周期。

代码：

<template>
    <div>
        <el-card class="box-card" style="margin: 100px auto;text-align: center;width: 430px;">
            <div slot="header" class="clearfix" style="text-align: center;font-weight: bolder;font-size: 20px">
                <span>登录</span>
            </div>
            <el-input
                    prefix-icon="el-icon-user-solid"
                    style="width: 80%;margin-top: 20px"
                    type="text"
                    placeholder="请输入用户名"
                    v-model="userName"
                    show-word-limit
            >
            </el-input>
            <el-input prefix-icon="el-icon-lock" style="margin-top: 20px;width: 80%" placeholder="请输入密码" v-model="pwd" show-password></el-input>
            <el-button style="width: 51%;margin-top: 40px;" type="primary" @click="login">登录</el-button>
            <div style="margin-top: 20px">
                <button @click="toRegist">注册</button>
            </div>

        </el-card>
    </div>
</template>

<script>
    export default {
        name:'Login',
        data(){
            return {
                userName:'',
                pwd:'',
            }
        },
        methods:{
            toRegist(){
                this.$router.go(-1)
            },
            login(){
                // localStorage.setItem('token','fdfjkdfjksdfdkf');
                this.$router.push('/index')
            }
        },
        created(){
            this.userName = this.$route.query.id
        },
        beforeDestroy(){
            console.log('我马上被销毁了');
        },
        // 当缓存组件被激活的时候执行
        activated(){
            this.userName = this.$route.query.id
        },
    }
</script>

<style scoped>

</style>

以上就是缓存路由组件的基本使用。