Uniapp小程序路由跳转navigator传参封装

简介

Uniapp是一款基于Vue和封装了小程序平台的开发框架，它允许开发者使用一套代码在多个平台上进行开发，包括微信小程序、支付宝小程序、H5、App等。在Uniapp中，我们可以使用navigator组件进行页面之间的跳转。本文将介绍如何封装uniapp小程序路由跳转navigator传参。

路由传参的需求

在开发过程中，我们常常需要在页面之间传递参数。比如，从列表页跳转到详情页时，我们需要将列表项的ID作为参数传递给详情页，以便详情页能够正确地显示对应的数据。这时候，我们可以使用navigator组件的url属性来实现参数传递。

封装navigator传参方法

1. 新建一个util.js文件，用于存放工具函数

2. 在util.js中定义一个封装的函数，用于获取参数传递的字符串

function getQueryString(params) {
  let query = ''
  for (let key in params) {
    query += `&${key}=${params[key]}`
  }
  // 去掉第一个&
  return query.substring(1)
}

3. 在需要传递参数的地方调用封装好的函数获取参数传递的字符串

import { getQueryString } from './util.js'

// 示例：从列表页跳转到详情页，传递id参数
uni.navigateTo({
  url: '/pages/detail/detail?' + getQueryString({ id: 1 })
})

4. 在接收参数的页面中使用uni.getStorageSync方法获取参数并进行相应处理

onLoad: function(options) {
  const { id } = options
  // 处理参数
  console.log(id)
}

总结

通过封装uniapp小程序路由跳转navigator传参，我们可以很方便地在不同页面之间传递参数。使用封装的函数可以使代码更加简洁、易读，并且可以提高开发效率。希望这篇博客对你在Uniapp开发中的路由传参有所帮助！

本文来自极简博客，作者：柠檬微凉，转载请注明原文链接：Uniapp小程序路由跳转navigator传参封装