Vue3实战之店铺详情页返回事件与路由参数获取数据

2023-12-13 01:44:57

处理店铺详情页的返回事件、获取路由参数和实现动态数据获取

在 Vue.js 实战中构建店铺详情页时，需要处理返回事件、获取路由参数，并根据参数动态获取数据。本教程将一步步指导你完成这些步骤。

处理返回事件

要处理返回事件，请在组件的 setup 函数中使用 useRouter 钩子：

import { useRouter } from 'vue-router'

export default {
  setup() {
    const router = useRouter()

    const handleBack = () => {
      router.back()
    }

    return {
      handleBack
    }
  }
}

获取路由参数

要获取路由参数，请在组件的 setup 函数中使用 useRoute 钩子：

import { useRoute } from 'vue-router'

export default {
  setup() {
    const route = useRoute()

    const shopId = route.params.shopId

    return {
      shopId
    }
  }
}

实现动态数据获取

有了店铺 ID 后，就可以根据 ID 动态获取店铺信息：

import { reactive, ref } from 'vue'
import { getShopInfo } from '@/api/shop'

export default {
  setup(props) {
    const shopInfo = reactive({})

    const loading = ref(true)

    const getShopData = async () => {
      loading.value = true

      try {
        const res = await getShopInfo(props.shopId)
        shopInfo.value = res.data
      } catch (error) {
        console.error(error)
      } finally {
        loading.value = false
      }
    }

    getShopData()

    return {
      shopInfo,
      loading
    }
  }
}