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

前往低代码交流专区

更多推荐