在项目中可能会遇到这样的问题,就是跳到详情在返回来还希望保持原来的搜索结果,就是不希望刷新,这个时候呢keep-alive就起到了很大的作用

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

一: 直接在外边加一层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>

当我们使用缓存的时候
如果遇到我们界面做了一些操作,然后跳转回来需要把一些数据默认为原本的值

可以使用watch来监听$router

watch:{
    $router:{
      handler(val){
        if(val.name==='menberList'){
          this.getTableData()
        }
      }
    }
  }
Logo

前往低代码交流专区

更多推荐