uniapp页面跳转传参

img

img

img


请问一下我想自己写一个省市选择 但是我不知道传参这部分怎么写 随机点击热门城市里的一个城市之后就会跳转会上一个页面然后 居住地那一栏就会显示出刚点击的城市名称 按省份选择的话随机点击一个省然后再选择一个市就会跳转到居住地那个页面 会以四川省-成都市的格式显示出来 可以的话请给我讲一下如何实现这个功能

在uniapp中页面跳转传参可以通过在跳转时在url后面添加参数来实现。具体实现步骤如下：

在当前页面中点击城市或省份后，跳转到下一个页面时，需要在url后面添加参数来传递选择的城市或省份信息。可以通过uniapp提供的uni.navigateTo或uni.redirectTo方法来跳转页面，并在url后面添加参数，示例代码如下：


// 点击热门城市，跳转到下一个页面
uni.navigateTo({
  url: '/pages/city-select/city-select?city=' + city
})

// 点击省份，跳转到下一个页面
uni.navigateTo({
  url: '/pages/city-select/city-select?province=' + province
})

在下一个页面中，可以通过uni.getLaunchOptionsSync方法获取当前页面跳转时传递的参数信息。根据参数信息来确定用户选择的城市或省份，并将其显示在页面中。示例代码如下：


// 获取当前页面跳转时传递的参数信息
const options = uni.getLaunchOptionsSync()

// 获取用户选择的城市或省份信息
const city = options.query.city
const province = options.query.province

// 在页面中显示选择的城市或省份信息
if (city) {
  // 显示选择的城市信息
  this.selectedCity = city
} else if (province) {
  // 显示选择的省份和城市信息
  this.selectedCity = province + '-成都市'
}

通过以上步骤，可以实现跨页面传参并在页面中显示选择的城市或省份信息。需要注意的是，在实际开发中，还需要考虑参数传递的安全性和合法性，以及参数的编码和解码等问题。

这个功能可以通过Vue Router和VueX来实现。首先需要在Vue Router中定义省份和城市的路由，并且将省份和城市的名称作为路由参数传递。在点击热门城市或者省份选择的时候，通过this.$router.push()方法跳转到指定的路由，并且将省份或者城市名称作为参数传递。

在居住地页面中，需要使用VueX来管理居住地信息的状态。当从热门城市或者省份选择页面跳转回来的时候，将选择的省份和城市名称存储到VueX的state中。然后在页面中使用{{ $store.state.city }}的方式来显示居住地信息。

下面是一个实现思路的示例代码：

在路由中定义省份和城市的路由：


const routes = [
  { path: '/province', component: Province },
  { path: '/province/:province/city/:city', component: City },
]

在Province组件中随机选择一个省份，并且跳转到该省份的城市选择页面：


export default {
  methods: {
    selectProvince() {
      const provinces = ['四川省', '广东省', '江苏省', '浙江省']
      const province = provinces[Math.floor(Math.random() * provinces.length)]
      this.$router.push({ path: `/province/${province}` })
    }
  }
}

在City组件中显示选择的省份和城市信息，并且将选择的信息保存到VueX的state中：

export default {
  created() {
    const { province, city } = this.$route.params
    this.$store.commit('setCity', `${province}-${city}`)
  }
}
在VueX中定义city的状态和mutation：

javascript
Copy code
const state = {
  city: '',
}

const mutations = {
  setCity(state, city) {
    state.city = city
  }
}

在页面中显示居住地信息：

<p>居住地：{{ $store.state.city }}</p>

这只是一个简单的实现思路示例，具体实现可能需要根据你的具体需求做出相应的调整。