路由缓存

路由缓存： 实现前进刷新，后退不刷新。

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.在路由配置中设置路由是否需要缓存

[{
        path: '/',
        name: 'index',
        component: index,
        meta: {
            keepAlive: false, //此组件不需要被缓存
        }
    },
    {
        path: '/page1',
        name: 'page1',
        component: page1,
        meta: {
            keepAlive: true, //此组件需要被缓存
            
        }
    },

　　　{
　　　　　　path: '/page2',
　　　　　　name: 'page2',
　　　　　　component: page2,
　　　　　　meta: {
　　　　　　　　keepAlive: true, // 此组件需要被缓存
　　　　　　　　isBack:false, //用于判断上一个页面是哪个
　　　　　　}

　　},]

不使用keep-alive的时候的钩子函数执行顺序：

beforeRouteEnter --> created --> mounted --> destroyed

使用keep-aive时的钩子函数执行顺序

第一次进入：beforeRouteEnter --> created --> mounted --> activated --> deactivated
第二次进入：beforeRouteEnter -->activated --> deactivated

activated钩子在keep-alive激活时调用
deactivated在keep-alive失活时调用

使用keep-alive时，需要每次进入都发送请求的接口要放到activated中