问答

vue路由缓存问题

作者:admin 2021-04-22 我要评论

从A路由跳转B路由,A路由需要缓存A,也就是返回后A数据还存在, 但是从A跳转至其他路由不缓存。 A B路由表示任意路由不是单独的一个。 ### 一个路由缓不缓存一般...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

从A路由跳转B路由,A路由需要缓存A,也就是返回后A数据还存在, 但是从A跳转至其他路由不缓存。
A B路由表示任意路由不是单独的一个。

###

一个路由缓不缓存一般是由两个东西决定的:

一个就是<router-view> 上的key,
这个key默认就是path,形如\xx\user的路径,
但这会导致一个问题,当一个参数是以GET方式传入的时候(比如\xx\user?id=1、\xx\user?id=2),可能导致信息不会更新,因为组件会复用,导致相关钩子不更新。
这个时候 可以给 router-viewkey改成$route.fullPath

另外还可以通过keep-alive组件来额外控制一个view是否缓存,它有个include属性很有用.
形如:

<keep-alive :include="keepAliveRoutes">
    <router-view :key="$route.fullPath"/>
</keep-alive>

这个include就可以自定义哪些组件需要缓存。
我们可以在Vue状态机里记录需要缓存的路由,
然后在 需要的条件 下去更新这个值就能实现自定义缓存路由视图。

举个比方:
有时候我们可能会有多标签打开关闭的需求,有些标签需要缓存,有些则不需要
这个时候,我们会在 特定的 条件下去更新状态机这个keepAliveRoutes的值
就类似这样 :

state.keepAliveRoutes.push(componentName);
state.keepAliveRoutes.splice(componentNamePositionIndex, 1);

以达到自定义控制组件(路由)视图的目的。

###
<router-view v-if="!$route.meta.keepAlive" />
<keep-alive>
    <router-view v-if="$route.meta.keepAlive" />
</keep-alive>
const routes = [
    {
        path: A,
        name: A,
        component: A,
        meta: {
            keepAlive: true,
        },
    },
    {
        path: B,
        name: B,
        component: B,
        meta: {
            keepAlive: false,
        },
    },
]

这样就可以了, 给A路由加上keep-alive

###

我觉得你可以结合以上两位给的方案
然后通过路由导航守卫beforeEach,在跳转的时候判断一下接下来的页面是否需要A页面缓存,
如果需要就存到keepAlive的include里面

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • vue路由缓存问题

    vue路由缓存问题

  • react项目中less引入背景图片

    react项目中less引入背景图片

  • echarts 饼图指示线的数量怎么设置(江

    echarts 饼图指示线的数量怎么设置(江

  • 有哪些对接了shopee lazada的开源erp程

    有哪些对接了shopee lazada的开源erp程

腾讯云代理商
海外云服务器