vue路由缓存

vue路由缓存

在业务场景中有时候需要页面缓存不清空，那么就需要保留缓存(include为需要缓存，而exclude为不缓存，且优先级大于include)

<KeepAlive> 是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。

<router-view v-if="!$route.meta.keepAlive"></router-view>
<keep-alive include="页面名称"><router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>

export const mainRoutes = {path: '/home',name: 'home',redirect: {name: 'welcome'},component: _import(`modules/home/home`),children: [{path: '/welcome',name: 'welcome',meta: {title: '首页',keepAlive: false //不需要缓存设置为false，需要则为true},component: _import(`modules/welcome/welcome`)}]
}