vue.js - vue组件开发中如何让返回上一页（go(-1)）被缓存？

问题描述

问 题

假设有3个路由:a,b,c。
需求
默认显示 A
A可以跳转到B，
B可以跳转到C，
这里C返回（go(-1)）B不刷新，
B返回A（go(-1)）不刷新。
要如何实现？

解决方案

vue有个keep-alive组件

<keep-alive >
  <router-link v-if="$route.meta.keepAlive"></router-link>
</keep-alive>
  <router-link v-if="!$route.meta.keepAlive"></router-link>

定义路由的地方meta属性加个keepAlive属性就可以了,下面写法页面A就会被缓存，B不会

{
    name: 'A',
    path: '/A',
    meta: {
      keepAlive: true
    },
    component: A
},
{
    name: 'B',
    path: '/B',
    meta: {
      keepAlive: false
    },
    component: B
}, 

keep-alive组件

这篇关于vue.js - vue组件开发中如何让返回上一页（go(-1)）被缓存？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！