Question

在我的vue应用中，使用vue提供的router-view缓存<keep-alive></keep-alive>中的某些特定组件。

当用户登录 posts.vue 组件时，如上所述缓存

一切正常。

现在，当用户注销时，我想销毁此 posts.vue 组件。因此当用户再次登录时，posts.vue组件会重新呈现

注销按钮存在于完全其他组件menu.vue中，并且此nenu.vue组件中存在用于注销的单击逻辑

那么我如何使用vm.$destroy()组件menu.vue组件上的posts.vue方法实现此方法

所以我的主要问题是如何控制另一个组件的生命周期

docs警告使用如下：，

在正常使用情况下，您不必自己调用此方法。

希望使用v-if和v-for以数据驱动的方式控制子组件的生命周期。

但在我的情况下，我无法使用v-if或v-show

还是有更好的方法可以使用

Answer 1

当您从子组件登录或注销时，分别发出'login'或'logout'事件。

RenderNotify

Answer 2

我有类似的问题，我发现一个简单的解决方案是强制通过location.reload()重新加载Web应用程序，这会清除keep-alive。

您可能还会发现此讨论很有趣：https://github.com/vuejs/vue/issues/6259

Answer 3

有一个很简单的方法可以做到这一点。感谢@loomchild提供的链接。

您可以在路由上定义meta对象。以这种方式定义它，以使要失效的保持活动路由生效。

    {
        path: '/invalidate_me',
        ...
        meta: {uuid: generateUUID()} // You'll need a method for this or something similar
    },

如果需要，请向Create GUID / UUID in JavaScript?寻求有关UUID的帮助。

然后，按照您的定义：

      <router-view :key="$route.path + ($route.params.id ? $route.params.id : '').toString() + ($route.meta && $route.meta.uuid ? $route.meta.uuid.toString() : '')"></router-view>

类似的东西。如果您不包含ID或不想按ID进行缓存，则可以。这些与问题无关，但与我正在使用的东西有关。因此，您实际上只需要meta部分。我们基本上是在告诉Vue考虑由路由上的id（如果存在）和路由上的uuid（如果存在）的组合来定义的组件

然后，当您想使组件内部失效时，请更改uuid。您可能需要在$ router上的列表中找到路线，或者如果您已经在正确的组件中，则可以执行以下操作：

this.$route.meta.uuid = generateUUID();

这将获得一个新的uuid并清除缓存。

希望这对其他人有帮助！

以编程方式销毁其他组件中的组件

3 个答案: