
本文介绍了vue Keep-alive 不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在我的 vue-application 中使用 vue-router尽管我设置了保持活动状态,但每次都会刷新内容页面安装的钩子和激活的钩子每次都被调用进入内容页面原谅我糟糕的英语
提前致谢
//home.vue<div id="home"><topnav ref="childMethod"></topnav><div class="mobile_header" ref="mobile_header"><img src="../assets/img/menu.png" @click="nav()"><p>earnest的小站</p></div><保持活力><router-view v-if="$route.meta.keepAlive"></router-view></保持活动><router-view v-if="!$route.meta.keepAlive"></router-view><div id="iconfont1" @click="gotop1()" v-show="show" title="回到顶部"></div><myfooter></myfooter>
//app.vue<div id="应用程序"><!--不写了,跟评论都在APP里.vue里面?一定要加上这一句--><loading v-show="isloading"></loading><路由器视图></路由器视图>
//路由器索引.js
const router=new Router({模式:'历史',路线:[{小路: '/',重定向:'/内容',组成部分:家,孩子们:[//注意这里有去//可能是灰路由,这里不管点什么都可以跳转到内容{path:'/about', name:'about', component:about,meta:{keepAlive:true}},{path:'/archives',name:'archives',component:archives,meta:{keepAlive:true}},{path:'/content',name:'content',component:content,meta:{keepAlive:true}},{path:'/article:_id',name:'article',component:article,meta:{keepAlive:true}}//这里的名字是内部导入里面的参数名]}
解决方案
在视图路由器上使用唯一键
<router-view v-if="$route.meta.keepAlive";:key=$route.fullPath"></保持活动>
i use vue-router in my vue-applicationcontent page refresh every time though i set keep-alivethe mounted hook and activated hook has been called each time i enter the content pageForgive me for my poor English
thanks in advance
//home.vue
<div id="home">
<topnav ref="childMethod"></topnav>
<div class="mobile_header" ref="mobile_header"><img src="../assets/img/menu.png" @click="nav()"><p>earnest的小站</p></div>
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
<div id="iconfont1" @click="gotop1()" v-show="show" title="回到顶部"></div>
<myfooter></myfooter>
</div>
//app.vue
<div id="app">
<!-- 不管写没写跟路由都在APP。vue里面?一定要加上这一句 -->
<loading v-show="isloading"></loading>
<router-view></router-view>
</div>
//router index.js
const router=new Router({
mode:'history',
routes: [
{
path: '/',
redirect:'/content',
component: home,
children:[
//注意这里有逗号
// 要是hash路由,这里无论点那个路由都是跳转到content
{path:'/about', name:'about', component:about,meta:{keepAlive:true}},
{path:'/archives',name:'archives',component:archives,meta:{keepAlive:true}},
{path:'/content',name:'content',component:content,meta:{keepAlive:true}},
{path:'/article:_id',name:'article',component:article,meta:{keepAlive:true}}//这里的name是命名路由里面的参数name
]
}
解决方案
use unique key on view router
<keep-alive>
<router-view v-if="$route.meta.keepAlive" :key="$route.fullPath"></router-view>
</keep-alive>
这篇关于vue Keep-alive 不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!