首先说解决方案,非常简单。使用keep-alive就可以了。
第一步:在需要缓存的页面路由里面的meta属性里写上keepAlive:true。例如
{
path: '/',
component: Layout,
redirect: '/dashboard',
children: [{
path: 'dashboard',
name: 'Dashboard',
component: () => import('@/views/dashboard/index'),
meta: { title: 'Dashboard', icon: 'dashboard', keepAlive: true } //++++
}]
},
第二步:在路由出口,把需要缓存的用keep-alive进行包裹;把不需要缓存的写在keep-alive外面
这里判断需不需要缓存就是用的路由里面的keepAlive
<!--缓存的视图-->
<keep-alive>
<router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<!--不缓存的视图-->
<router-view v-if="!$route.meta.keepAlive" />
第三步:手动测试
在Dashbord组件里面写非常多行数据,然后滑倒下面,此时可以记住滑动块所处的位置。
点击其他路由,然后点击后退键。
这是会返回到Dashbord组件,并且滑动块所处的位置不会变。