Vue.js中使用Axios调用API 选择汽车品牌后获取车型列表并跳转页面展示

1. 补充基础状态绑定和事件调整 #

• 在data中新增selectedBrand字段存储当前选中的品牌信息，用来后续接口传参
• 给单选框添加v-model绑定和value赋值，把change事件绑定到input元素上（原绑定在label上不符合事件触发逻辑）

2. 调整跳转逻辑，完成接口请求 #

这里提供两种常用实现方案，按需选择即可：

方案A：当前页请求车型数据后跳转 #

适合数据量不大的场景，请求完成后把数据存在sessionStorage再跳转，避免刷新丢失：

<script>
export default {
  name: 'Brands',
  data() {
    return {
      brands: [],
      selectedBrandId: null // 新增选中品牌ID存储
    }
  },
  methods: {
    async next() {
      if (!this.selectedBrandId) return // 没选中品牌不执行后续操作
      try {
        // 请求对应品牌的车型接口
        const res = await this.axios.get('你的车型接口地址', {
          params: { brandId: this.selectedBrandId }
        })
        // 把车型数据存到会话存储，跳转后读取
        sessionStorage.setItem('carModels', JSON.stringify(res.data.models))
        // 跳转页面
        this.$router.push({path: '/model'})
      } catch (err) {
        console.log('车型请求失败', err)
      }
    },
  },
  mounted() {
    this.axios
        .get('https:***')
        .then(response => (this.brands = response.data.brands))
        .catch(error => {
          console.log(error)
        })
  },
}
</script>
<template>
  <div class="alphabet-wrap">
    <ul class="alphabet">
      <li v-for="brand in brands"
          :key="brand.name"
          :class="brand.id"
      >
        <label :for="brand.id">
          <!-- 调整v-model、value绑定，把change事件移到input上 -->
          <input type="radio"
                 :id="brand.id"
                 name="brand"
                 :value="brand.id"
                 v-model="selectedBrandId"
                 @change="next"
          >
          <span class="text">{{ brand.name }}</span>
        </label>
      </li>
    </ul>
  </div>
</template>

方案B：品牌ID通过路由传参，到车型页再请求数据 #

适合车型数据量大、或者需要支持页面刷新复用的场景，只需要把next方法改成下面的逻辑即可：

next() {
  if (!this.selectedBrandId) return
  // 路由传参带品牌ID
  this.$router.push({
    path: '/model',
    query: { brandId: this.selectedBrandId }
  })
}

3. 车型页（/model对应组件）逻辑编写 #

如果选择方案A，直接读取存储的车型数据渲染即可：

<script>
export default {
  name: 'Model',
  data() {
    return {
      models: []
    }
  },
  mounted() {
    const modelStr = sessionStorage.getItem('carModels')
    if (modelStr) {
      this.models = JSON.parse(modelStr)
      // 用完可以清掉存储，避免下次进入留旧数据
      sessionStorage.removeItem('carModels')
    }
  }
}
</script>

如果选择方案B，在车型页拿路由参数发请求即可：

<script>
export default {
  name: 'Model',
  data() {
    return {
      models: []
    }
  },
  async mounted() {
    const brandId = this.$route.query.brandId
    if (!brandId) return this.$router.push('/brands') // 没拿到品牌ID跳回品牌页
    try {
      const res = await this.axios.get('你的车型接口地址', {
        params: { brandId }
      })
      this.models = res.data.models
    } catch (err) {
      console.log('车型请求失败', err)
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者test