vue 保持活动状态不工作

Question

我在我的 vue-application 中使用 vue-router \n每次内容页面刷新，尽管我设置了 keep-alive\n每次都会调用已安装的钩子和激活的钩子\nter 内容页面\n请原谅我糟糕的英语
\n谢谢进步

\n\n

//home.vue\n    <div id="home">\n        <topnav ref="childMethod"></topnav>\n        <div class="mobile_header" ref="mobile_header"><img src="../assets/img/menu.png" @click="nav()"><p>earnest\xe7\x9a\x84\xe5\xb0\x8f\xe7\xab\x99</p></div>\n        <keep-alive>\n            <router-view v-if="$route.meta.keepAlive"></router-view>\n        </keep-alive>\n        <router-view v-if="!$route.meta.keepAlive"></router-view>\n        <div id="iconfont1" @click="gotop1()" v-show="show" title="\xe5\x9b\x9e\xe5\x88\xb0\xe9\xa1\xb6\xe9\x83\xa8"></div>\n        <myfooter></myfooter>\n    </div>\n\n\n //app.vue\n<div id="app">\n        <!-- \xe4\xb8\x8d\xe7\xae\xa1\xe5\x86\x99\xe6\xb2\xa1\xe5\x86\x99\xe8\xb7\x9f\xe8\xb7\xaf\xe7\x94\xb1\xe9\x83\xbd\xe5\x9c\xa8APP\xe3\x80\x82vue\xe9\x87\x8c\xe9\x9d\xa2\xef\xbc\x9f\xe4\xb8\x80\xe5\xae\x9a\xe8\xa6\x81\xe5\x8a\xa0\xe4\xb8\x8a\xe8\xbf\x99\xe4\xb8\x80\xe5\x8f\xa5 -->\n        <loading v-show="isloading"></loading>\n            <router-view></router-view>\n</div>\n

\n\n

//路由器index.js

\n\n

const router=new Router({\n    mode:\'history\',\n    routes: [\n    {\n        path: \'/\',\n        redirect:\'/content\',\n        component: home,\n        children:[\n      //\xe6\xb3\xa8\xe6\x84\x8f\xe8\xbf\x99\xe9\x87\x8c\xe6\x9c\x89\xe9\x80\x97\xe5\x8f\xb7\n      // \xe8\xa6\x81\xe6\x98\xafhash\xe8\xb7\xaf\xe7\x94\xb1\xef\xbc\x8c\xe8\xbf\x99\xe9\x87\x8c\xe6\x97\xa0\xe8\xae\xba\xe7\x82\xb9\xe9\x82\xa3\xe4\xb8\xaa\xe8\xb7\xaf\xe7\x94\xb1\xe9\x83\xbd\xe6\x98\xaf\xe8\xb7\xb3\xe8\xbd\xac\xe5\x88\xb0content\n      {path:\'/about\', name:\'about\', component:about,meta:{keepAlive:true}},\n      {path:\'/archives\',name:\'archives\',component:archives,meta:{keepAlive:true}},\n      {path:\'/content\',name:\'content\',component:content,meta:{keepAlive:true}},\n      {path:\'/article:_id\',name:\'article\',component:article,meta:{keepAlive:true}}//\xe8\xbf\x99\xe9\x87\x8c\xe7\x9a\x84name\xe6\x98\xaf\xe5\x91\xbd\xe5\x90\x8d\xe8\xb7\xaf\xe7\x94\xb1\xe9\x87\x8c\xe9\x9d\xa2\xe7\x9a\x84\xe5\x8f\x82\xe6\x95\xb0name\n      ]\n  }\n

\n

Answer 1

在视图路由器上使用唯一密钥

<keep-alive>
    <router-view v-if="$route.meta.keepAlive" :key="$route.fullPath"></router-view>
</keep-alive>