27.keep-alive保持路由状态

我们在浏览网页的时候，有时候跳到别的页面的时候，在跳回去还是希望保持我们离开页面时候的状态，这个时候就可以用keep-alive来解决这个问题了，keep-alive字面意思就是保持活着的意思，它的使用也很简单，直接用keep-alive包裹住router-view就可以了，是不是很简单😎

<keep-alive>
    <router-view></router-view>
</keep-alive>

但是，我遇到了问题，问题就是出在嵌套路径，首先，有三种解决方案：

第一种方案：通过生命周期钩子函数，想法就是，created每次只会创建一次，我们在created钩子函数中可以控制它的路由

created() {
        console.log('home created')
        this.$router.push('/home/news')
    }

image.png
这种方式的结果就是我们在跳回来的时候，由于使用了keep-alive，只会在第一次打开页面的时候触发一次created回调函数，在往回跳转的时候路由就变成了/home，😱，so，pass

第二种解决方案：通过activated和deactivated函数来解决，activated函数就是每次页面活跃的时候就会触发，deactivated函数就是每次离开页面的时候就会触发，我们可以预先定义一个变量保存住一个路径，然后当我们离开的时候，拿到离开时的路由，然后赋值给这个变量，在activated函数中控制路由

export default {
    name: 'Home',
    data() {
        return {
            path: '/home/news'
        }
    },
    activated() {
        this.$router.push(this.path)
    },
    deactivated() {
        console.log(this.$route.path) // 新页面的路由
        this.path = this.$route.path
    },
}

image.png image.png

这种方案的结果就是跳转不回去了，deactivated函数获取到的路由是我们跳转到的页面的路由，也就是说我们获取的时机有点不大对，😱，好shit

第三种方案：我们可以通过activated函数和beforeRouteLeave函数来解决这个问题，思路和第二种方案一样，看看beforeRouteLeave函数能不能拿到我们离开时页面的路由

export default {
    name: 'Home',
    data() {
        return {
            path: '/home/news'
        }
    },
    activated() {
        this.$router.push(this.path)
    },
    beforeRouteLeave (to, from, next) {
        console.log(from.path)
        this.path = from.path
        next()
    }
}

这种方案终于成功的实现了，我们的需求，😍，perfect

到此，我们的需求解决了，但是我又有了新的需求，如果我想让一个组件频繁的被创建销毁，怎么办呢，由于我们是在app.vue中写的keep-alive，所以所有的组件现在都不会频繁的创建销毁，这时我们就需要用到keep-alive的两个属性，include和exclude，这两个属性可以接受字符串和正则表达式作为属性值。

<keep-alive exclude="Profile">
    <router-view></router-view>
</keep-alive>

注意：这里的Profile就是组件当中的name属性值。