2017-04-07 91 views
0

在我的vue应用中,中的某些特定组件使用vue提供的<keep-alive></keep-alive>进行缓存。以编程方式销毁其他组件的组件

posts.vue组件在用户登录正如我上面

一切说缓存工作正常。

现在我想破坏posts.vue组件在用户登录时out.So是posts.vue组件重新呈现时再次

注销按钮的用户登录存在于其他完全组件menu.vue和上点击逻辑注销存在于这个nenu.vue组件

所以,我怎么能实现这个使用vm.$destroy()menu.vue成分分析法对posts.vue组件

所以我的主要问题是如何从其他

docs警告使用此如下控制一个组件的生命周期:,

在正常使用情况下,你不应该调用这个方法你自己。

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

但对我来说,我不能用v-ifv-show

或者有没有更好的办法可以使用

+0

什么是现在发生的事情时重新进行登录并尝试访问posts.vue? – Deepak

+0

@Deepak先前缓存的帖子也正在显示....所以我希望这个组件强制重新呈现当用户再次登录 –

+0

如果你可以发布posts.vue内完成可能会有所帮助。获取数据的函数应该在创建的钩子中调用。这应该照顾它。 – Deepak

回答

1

当您登录或子组件注销,发出的登录'或'注销'事件。

<template> 
    <div id="app"> 
    <router-view name='login' @login="login=true"></router-view> 
    <router-view name='header' @logout="login=false"></router-view> 
    <keep-alive v-if="login"> 
     <router-view name='write'></router-view> 
    </keep-alive> 
    <router-view name='management'></router-view> 
    <router-view name='account'></router-view> 
    <router-view name='statistics'></router-view> 
    <router-view name='view'></router-view> 
    <router-view name='password'></router-view> 
    </div> 
</template> 

<script> 
export default { 
    name: 'app', 
    data() { 
    return { 
     login: true 
    } 
    } 
} 
</script> 

<style> 
#app { 
    font-family: 'Avenir', Helvetica, Arial, sans-serif; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
    text-align: center; 
    color: #2c3e50; 
    margin-top: 0; 
    height: 100%; 
} 
</style> 
0

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

您也可能会发现这个有趣的讨论:https://github.com/vuejs/vue/issues/6259

相关问题