解决vue项目$router.go(-1)返回刷新问题（keep-alive）

相信每个人在项目中都会遇到这样的需求，就是跳到详情在返回来还希望保持原来的搜索结果，就是不希望刷新，这个时候呢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>

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