vue路由中使用keep-alive 以及activated和deactivated 钩子

本次只是记录下开发中碰到的问题。

最近做一个活动页面，涉及到角色和权限的问题，需要跳转很多页面，于是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>

巴特西

vue路由中使用keep-alive 以及activated和deactivated 钩子

最新文章

热门文章