vue实现前进刷新，后退不刷新效果

实现a页面 跳到 b页面 ，b页面 后退到a页面 a页面不刷新效果

此功能的实现需要使用路由生命周期 beforeRouteLeave()

一. 首先在router中对需要缓存的a页面进行缓存

         {
            path: 'UAssistant',
            name: 'UAssistant',
            component: UAssistant,
            meta:{
                keepAlive:true    //需要进行缓存的路由
            }
        },

二.然后在入口App文件进行缓存视图组件

<template>
    <div id="app">
        <keep-alive>                 //用keep-alive进行缓存
            <!--缓存视图组件-->
            <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>
    </div>
</template>

三.之后在b页面进行路由生命周期钩子函数的实现

  export default {
        name: 'UAbout',
        beforeRouteLeave(to, from, next) {
            to.meta.keepAlive = true;
            next()
        },
    }