Question

我正在尝试为某些路由组件有条件地设置keep alive，并且能够清除缓存的路由并设置新的缓存路由。我的代码可以使用，但我无法清除缓存的组件。

我对要缓存的路线有元支柱

        {
            name: 'Route1',
            path: '/route1',
            component: lazyLoading('route1', true),
            meta: {
                auth: true,
                cacheRoute: 'Route1',
            },
        },
        {
            name: 'Route2',
            path: '/route2',
            component: lazyLoading('route1', true),
            meta: {
                auth: true,
                cacheRoute: 'Route2',
            },
        },

然后我在路由器上使用beforeEach方法。

router.beforeEach((to, from, next) => {
    if (to.meta.cacheRoute && store.getters.cachedRouteObject.cached !== 
    to.meta.cacheRoute)
        store.dispatch('cacheRoute', {
            cached: to.meta.cacheRoute,
            uncached: from.meta.cacheRoute,
        }).then(() => {
            next();
        });
    next();
});

使用像这样的vuex cachedRouteObject：

    <keep-alive :include="cachedRouteObject.cached" 
    :exclude="cachedRouteObject.uncached">
        <router-view></main-router-view>
    </keep-alive>

关键是随着时间的推移，当我从路由切换到路由时，所有必须缓存的组件都会保持缓存，因此我最终得到了许多缓存组件。而不只是1.似乎排除属性不起作用，因为我已经预期。关于如何始终只缓存一个路径组件的任何想法。

Answer 1

您需要传递keep-alive组件名称，而不是路径名称。

首先在组件自己的名称选项上检查匹配，然后其本地注册名称（父组件中的密钥） option）如果name选项不可用。匿名组件无法与之匹敌。

https://vuejs.org/v2/api/#keep-alive

使用keep-alive动态缓存1个路由组件

1 个答案: