解决vue多个路由共用一个页面，路由传参不同，页面显示数据不同，重新加载数据

向右看齐 2023-07-20 05:36 6阅读 0赞

## 解决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})
        }
      }