Vue路由组件的缓存

如果没有组件缓存的话，默认效果是这样的，之前的数据没有保存

添加组件缓存的话比较简单，只需要在router-view外层包一个keep-alive标签即可，然后include属性的值为组件name

<keep-alive :include="['Circle']">
          <router-view></router-view>
</keep-alive>

路由组件的代码如下（name为Circle）：

<template>
    <div>
        <h1>关于</h1>
        <h2>{{num}}</h2>
        <button @click="add">添加</button>
    </div>
</template>

<script>
    export default {
        name:"Circle",
        data(){
            return {
                num:0
            }
        },
        methods: {
            add() {
                this.num++
            }
        },
    }
</script>

<style>
</style>

加入缓存的效果如下：