本次只是记录下开发中碰到的问题。
最近做一个活动页面,涉及到角色和权限的问题,需要跳转很多页面,于是vue-router走起,顺便keep-alive也用起来了,嗯,跳转的很爽,但是一个详情页面组件,被两个路由组件引用了,此时发现有一个路由在调用详情组件时没有按需求刷新,并且已经在keep-alive上设置了exclude,调试了半天不能解决问题,就用最笨的办法,把一个相同的页面写在两处,要求算是做完了,但是,看着这样的代码,总觉得不舒服,并且有改动的话要改两处,很容易遗漏,于是,研究了一下,之前也测试过,感觉就是是否新创建的问题 ,正好,看文档里面有 activated和deactivated两钩子。
说说我的总结吧:
在keep-alive组件中 在引用组件,并且通过props传值时,如果所传递的参数没有发生改变,那么子组件是不会更新的,并且,在子组件上可能还需要使用v-if来修饰,这样,就可以通过activated和deactivated这两 钩子来变化数据,
贴一下代码,相当于做个笔记
<template> <div class="my-family"v-if="team_id>0"> <FamilyItem :role="team_id" :team_id="team_id" :srouce="‘other‘"></FamilyItem> </div> </template> <script> import FamilyItem from ‘./common/FamilyItem‘; export default { name: "MyFamily", components:{ FamilyItem }, data(){ return{ role:-1, team_id:0 } }, /* computed:{ my_role(){ return store.role; }, my_team_id(){ return store.team_id; }, },*/ created() { console.log(‘进来执行了‘); this.role=this.$route.params.role; this.team_id=this.$route.params.team_id; }, activated(){ this.role=this.$route.params.role; this.team_id=this.$route.params.team_id; console.log(‘activated进来了‘, this.role,this.team_id); }, deactivated(){ console.log(‘deactivated,,,清除‘); this.role=-1; this.team_id=0; }, } </script>
原文地址:https://www.cnblogs.com/ysla/p/11605371.html
时间: 2024-11-11 17:24:14