类似 这种情况 我们在分类页面查看到我们想要的 商品之后 然后我们去登陆页面登录上去 再重新返回分页页面的时候 还是显示着我们看到的效果
这样的效果我们可以使用 keep-alive 做到
用keep-alive 标签包括着 就可以实现了
<keep-alive>
<router-view></router-view>
</keep-alive>
但又有了新的问题 我们有的组件不想让缓存怎么办
比如登录组件 别急我们还可以做到
在 路由配置文件中进行配置 那个需要缓存的话 在路由对象下面添加一个属性 meta:{keepAlive } 专门用来存储用户自定义的属性 不需要缓存的路由就不用添加
{
path: '/category',
name:'home',
comonent:()=>import('@/views/Home.vue'),
meta: {
keepAlive: true
}
}
{
path: '/profile',
name: 'profile',
comonent:()=>import('@/views/Login.vue'),
}
然后在App.vue文件中 使用v-if渲染就好了 有的keepAlive的就在缓存中渲染 没有 就不渲染 就可以了
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
然后可以实现 有的被缓存有的不被缓存
$router 和 $route 一个是路由对象 一个是当前路由对象 是有区别的 大与小的关系
