2020-12-19解決keep-alive的問題

使用flag的好處

先描述問題，就是需要在首頁和商城來回切換的時候，配飾那個選項不能變，同時重新整理也是。

1.解決重新整理

重新整理的時候，根據當前路由的params來判斷，是否做處理。裡面含有id，說明是當前頁面，就寫個判斷不做任何操作就行。如果是其他頁面進來，這裡又分為兩種情況，第一種是第一次進來，第二種是非第一次進來。
第一次進來可以寫在created裡面，其他的就寫在actived裡面。
問題是：重新整理的時候，created和actived都會執行（這是主要問題，還有其他問題）。然後也不能在actived裡面發請求，反正就很難受，最終目的就是created和actived不能同時執行。

2.解決辦法

就是設定一個flag，開始為true，然後執行created的時候關掉，然後就不會執行actived了，但是為了滿足第二種情況，就是出去再回來的這種情況。需要把flag開啟。所以在deactived裡面開啟。
具體的不太好說，直接看程式碼

data () {
    return {
      tabs: [],
      cateIndex: 0,
      leaveindex: 1,
      flag: true
    }
  },
  created () {
    this.$http.getTabs()
      .then(resp => {
        this.tabs = resp.list
        // 預設跳到第0條資料所對應的路由
        // 但是如果是在當前其他資料元件重新整理的時候不跳轉的
        const { id } = this.$route.params
        if (id) {
          // 如果id已存在，說明是在重新整理，那就不跳轉，但是需要修改cateIndex
          this.tabs.forEach((tab, index) => {
            if (tab.id === parseInt(id)) this.cateIndex = index
          })
        } else {
          // id不存在說明是從別的元件過來的，那就重定向
          this.$router.push(`/mall/${this.tabs[0].id}`)
          // this.$router.push('/mall/1')
        }
      })
    this.flag = false
  },
  mounted () {
    console.log(this.tabs)
  },
  updated () {
    console.log(this.tabs)
  },
  beforeRouteLeave (to, from, next) {
    // console.log(this.$route.params.id)
    this.leaveindex = this.$route.params.id
    next()
  },
  activated () {
    if (this.flag) {
      // console.log('acmilan')
      this.$router.push(`/mall/${this.leaveindex}`)
    }
  },
  deactivated () {
    this.flag = true
  },

總結

1.重新整理頁面的時候以及第一次進入頁面的時候，created會比actived先執行。（兩個都會執行）但是出去再進來就不會再執行created了，只會執行actived（出去的時候會執行deactived）。
2.通過使用beforRouteleave，來做走之前的傳值（這個值在再一次進來的時候會用到）。
3.created裡面的非同步請求的資料，mounted拿不到，但是updataed可以拿到。