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

1.app.vue

<template>
  <div id="app">
    <!-- <router-view/> -->
    <!-- 可以被缓存的视图组件 -->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <!-- 不可以被缓存的视图组件 -->
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

2、router/index.js

const router = new VueRouter({
    mode: 'history',
     routes: [
        {
            path: '/list',
            name: 'list',
            component: () =>
                import ('../views/list.vue'),
            meta: {
                keepAlive: true //此页面需要缓存
            }
        },
        {
            path: '/list/:id',
            name: 'detail',
            component: () =>
                import ('../views/detail.vue'),
            meta: {
                keepAlive: false //此页面不需要缓存
            }
        },
    ]
})

3、detail.vue

beforeRouteLeave(to, from, next) ： 离开路由之前执行的函数,可用于页面的反向传值，页面跳转。

beforeRouteLeave(to,from,next){

    //设置下一个路由的meta,让列表页面缓存,即不刷新

    to.meta.keepAlive = true

    next()

},