uniapp + vue3 使用 onLoad等生命周期函数（setup语法糖，路由传参、接参）

uniapp + vue3 使用 onLoad等生命周期函数（setup语法糖，路由传参、接参）

针对路由传参、接参的业务场景

---

重要代码块 · 示下：

• 重要代码块：

  import {
  		onLoad,
  		onPageScroll
  	} from '@dcloudio/uni-app'
  

• 使用方式 · 示下

  onLoad((query: any) => {
      // 获取路由入参path
      queryPO.value = query;
      getDetails(queryPO.value.id)
  })
  

案例：

• 效果图：
  

• 文件details.vue 调用实例：

  const queryPO = ref<any>({
      id: null
  })
  const details = ref<any>({})
  
  async function getDetails(id){
      const data = await BaseAPI.getNewsDetails(id)
      // console.log(data)
      details.value = data.data
  }
  
  onLoad((query: any) => {
      // 获取路由入参path
      queryPO.value = query;
      getDetails(queryPO.value.id)
  })
  

---

拓展 · 优化 · 说明：

• 通过onLoad()方式，不仅能获取路由参数，还可以简化代码的使用，如在一定程度上可免去组合方式（ onMounted() + onActived()）的使用。

---

完结。