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>