H5W3
当前位置:H5W3 > 问答 > 正文

keep-alive 之下新增子路由 不渲染

<keep-alive>
<router-view :key="realodKey"></router-view>
</keep-alive>
<div @click="reload">刷新</div>
<div @click="add">新增子路由</div>
reload(){
this.realodKey = Math.random()
}
add(){
this.$router.push({path:'xxx'})
}

(reload 是为了刷新当前路由用的)

第一次加载的时候一切正常,但是点击新增子路由 页面就空白了(实测了下事这个 key 引起的 去掉就好了,但是这就没了刷新功能)…现在就很为难

再简化一下需求
每个路由都需要被缓存(已实现,和那些 v-if=”xxx”的需求不同,那些事部分不需要缓存), 在此之上 新增一个刷新当前路由的功能(这个卡住了)

回答

<a></a>
<b></b>
<c></c>
<div>刷新</div>

点击刷新 传个参数进去;actived = true

子组件

activated(){
    //判断下 然后调用接口;
    if(actived){
    }
}

这个传参建议是放在vuex;不知道你的 父子层级数;
最重要是请求数据后要恢复actived = false;

<keep-alive>
     <router-view v-if="reload"></router-view>
</keep-alive>
<router-view v-if="!reload"></router-view>
<div @click="reload = false">刷新</div>
data(){
    return{
        reload:true
    }
}

建议不要使用key这种方式,可以在组件路由钩子里将路由组件实列引用保存起来,要刷新缓存在跳转前,注销组件

include、exclude属性了解一下
keep-alive

未经允许不得转载:H5W3 » keep-alive 之下新增子路由 不渲染

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址