解決vue多個路由共用一個頁面，路由傳參不同，頁面顯示數據不同，重新加載數據

解決vue多個路由共用一個頁面，路由傳參不同，頁面顯示數據不同，重新加載數據

配置 unitType判斷路由

路由配置 router/index.js：

children: [
      {
        path: 'pilotUnit',
        name: 'pilotUnit',
        component: _import('pilotUnit/index'),
        meta: {
          title: 'pilotUnit',
          unitType: 3
        }
      },
      {
        path: 'chiefUnit',
        name: 'chiefUnit',
        component: _import('pilotUnit/index'),
        meta: {
          title: 'chiefUnit',
          unitType: 2
        }
      },
      {
        path: 'examinationUnit',
        name: 'examinationUnit',
        component: _import('pilotUnit/index'),
        meta: {
          title: 'examinationUnit',
          unitType: 1
        }
      }
    ]

公共頁面 pilotUnit/index：

data () {
    return {
      unitType: 1
    }
  },
  mounted () {
    // 渲染後 獲取 unitType，頁面刷新後也能重新獲取
    this.unitType = this.$route.meta.unitType
  },
  watch: {
    '$route' () {
      // 監聽路由變化，獲取unitType
      this.unitType = this.$route.meta.unitType
    },
    'unitType' () {
	  // 監聽 unitType，調用接口，獲取數據
      this.$store.dispatch('pilotUnit/handleUnitType', this.unitType)
      this.$store.dispatch('pilotUnit/getTableList', {pageSize: 10, currentPage: 1, type: this.unitType})
    }
  }