1、v-if=“$route.meta.keepAlive” 需要放在router-view上,不能放在keep-alive上
<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>
<script>
2、需要缓存的界面它的进入页也需要缓存,即列表页需要缓存,那么详情页也需要缓存,否则就不在同一个router-view 中无法实现缓存
{
path: '/exhibitionList',
name: 'ExhibitionList',
// component: () => import('@/views/regions/Xm'),
component: () => import('@/views/details/ExhibitionList'),
meta: { title: 'details_exhibitor_members', keepAlive: true,scrollTop: 0}
},
{
path: '/exhibitionDetail',
name: 'exhibitionDetail',
// component: () => import('@/views/regions/Xm'),
component: () => import('@/views/details/ExhibitionDetail'),
meta: { title: 'details_exhibitor_details', keepAlive: true }
},
name 要配置正确,路由上定义的名称要与页面名称一致
(另外需要注意的是页面名称不能与引入的组件名称一致,否则会报错)
export default {
name: 'ExhibitionList', // 是这里的name
data() {
return {
};
},
这里就是需要注意的点了,每次写都有一点曲折,这里记录一下,总结一下,方便下回查阅
个人学习笔记