前言

相信每个人在项目中都会遇到这样的需求，就是跳到详情在返回来还希望保持原来的搜索结果，就是不希望刷新，这个时候呢keep-alive就起到了很大的作用

接下来就说说如何使用keep-alive来动态缓存页面的。

一： 直接在<router-view></router-view>外边加一层keep-alive就是全部缓存，返回都不刷新

App.vue

<template>
  <div id="app">
      <keep-alive>
        <router-view></router-view>
        </keep-alive>
  </div>
</template>

二：配合路由使用，动态去缓存你所需要缓存的，而不是全部缓存。

需要在router.js里边配置

const router = new Router({
    // mode: 'history',
    routes: [{
            path: '/', // 这个斜杠就是默认跳转的页面
            name: 'index',
            component: resolve => require(['@/components/index'], resolve),
            meta: {
                requiresAuth: true,
                keepAlive: false,
            }
        },
        {
            path: '/index',
            name: 'index',
            component: resolve => require(['@/components/index'], resolve),
            meta: {
                requiresAuth: true,   //设置此项则表示必须登录才能进入
                keepAlive: false,     //若为false则初始不缓存，若为true则表示缓存
            }
        },
        {
            path: '/index2',
            name: 'index2',
            component: resolve => require(['@/components/index2'], resolve),
            meta: {
                requiresAuth: true
            }
        }]
}）

然后在路由导航守卫去做权限处理

我是写在route/index.js中，这个看你不要求
//  判断是否需要登录权限 以及是否登录
router.beforeEach((to, from, next) => {
    if (to.path == '/orderDs' || to.path == '/interveneDs' || to.path == '/afterSaleDs' || to.path == '/checkDs' || to.path == '/auditDs' || to.path == '/addVertising' || to.path == '/buyerDs' || to.path == '/gsQueryDs') {
        from.meta.keepAlive = true;   // from.meta  表示缓存列表页
        next();
    }else{
      from.meta.keepAlive = false;
      next();
    }
})

export default router

接下来看看在app.vue中的处理

<template>
  <div id="app">
需要缓存的
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
不需要缓存的
      <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

结束语

到此从详情返回列表就会缓存你所需要的缓存的了，后期再加上你就自己的业务逻辑就好了，后期还会慢慢更新，慢慢学习。