相信每个人在项目中都会遇到这样的需求,就是跳到详情在返回来还希望保持原来的搜索结果,就是不希望刷新,这个时候呢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>
到此从详情返回列表就会缓存你所需要的缓存的了,后期再加上你就自己的业务逻辑就好了,后期还会慢慢更新,慢慢学习。
参考博客:https://www.jianshu.com/p/cda1841c0bab