uniapp 省市选择 vue3

Question

请问一下为什么我传的province值是空呢 然后就是跳转到选择城市的页面之后 我不知道要怎样写了 如何根据传入的值进行不同城市内容的渲染

Answer 1

该回答引用ChatGPT

选择省份的页面（Province.vue）：

<template>
  <div>
    <div v-for="(province, index) in provinces" :key="index">
      <span @click="goCity(province)">{{ province }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      provinces: ["广东省", "浙江省", "江苏省"]
    };
  },
  methods: {
    goCity(province) {
      this.$router.push({
        path: "/city",
        query: {
          province: province
        }
      });
    }
  }
};
</script>

选择城市的页面（City.vue）：

<template>
  <div>
    <div v-for="(city, index) in filteredCities" :key="index">
      <span>{{ city }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    province: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      cities: {
        "广东省": ["广州市", "深圳市", "珠海市"],
        "浙江省": ["杭州市", "宁波市", "温州市"],
        "江苏省": ["南京市", "苏州市", "无锡市"]
      }
    };
  },
  computed: {
    filteredCities() {
      return this.cities[this.province] || [];
    }
  }
};
</script>

在路由中定义两个页面的路由：

import Vue from "vue";
import VueRouter from "vue-router";
import Province from "./views/Province.vue";
import City from "./views/City.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    redirect: "/province"
  },
  {
    path: "/province",
    name: "Province",
    component: Province
  },
  {
    path: "/city",
    name: "City",
    component: City,
    props: route => ({
      province: route.query.province
    })
  }
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});

export default router;