uni-app跳转传参改变标题

随着移动端应用的兴起和用户数量的增加，越来越多的开发者开始选择使用uniapp作为跨平台开发的框架。而在实际开发过程中，经常会遇到需要跳转页面并传递参数的需求，同时也需要根据不同页面的内容改变标题的情况。那么，本文将介绍如何在uniapp中实现跳转传参和改变标题的功能。

一、uniapp中路由跳转

uniapp是一个基于Vue.js的框架，其路由跳转和Vue.js的基本一致。在uniapp中，我们可以使用uni.navigateTo()方法进行页面跳转，同时也可以使用uni.navigateBack()方法返回上一页。需要注意的是，在H5端（网页端）中使用uni-app模拟器时，无法使用uni.navigateBack()方法。

下面是一个跳转到目标页面的示例代码：

uni.navigateTo({
  url: '/pages/targetPage/targetPage'
});

二、传递参数

在实际开发中，我们常常需要在页面之间传递数据。例如在登录后，我们需要在个人中心页面上显示用户的用户名和头像。在uniapp中，传递参数非常简单，我们只需要在跳转链接中添加参数即可。

下面是一个传递参数的示例代码：

uni.navigateTo({
  url: '/pages/targetPage/targetPage?id=123&name=john'
});

在目标页面（即targetPage）中，我们可以使用uni.getStorageSync()方法获取传递的参数。下面是一个获取参数的示例代码：

onLoad: function (options) {
    console.log(options.id);    // 输出：123
    console.log(options.name);  // 输出：john
}

值得注意的是，传递参数时建议使用encodeURIComponent()方法进行编码，避免出现乱码。在目标页面中，我们可以使用decodeURIComponent()方法进行解码。

三、改变标题

在uniapp中，我们可以通过设置页面的标题来更好地展示页面内容，让用户更方便地理解当前页面所呈现的内容。可以在page.json文件中设置"navigationBarTitleText"属性或使用uni.setNavigationBarTitle()方法进行设置。

下面是一个设置页面标题的示例代码：

// 在page.json文件中设置页面标题
{
  "navigationBarTitleText": "页面标题"
}

// 使用uni.setNavigationBarTitle方法设置页面标题
uni.setNavigationBarTitle({
  title: '页面标题'
});

需要注意的是：

1. 若在page.json文件中设置导航栏的标题，将会覆盖在js文件中通过uni.setNavigationBarTitle()方法设置的标题。
2. 只有在当前页面生效，每进入一个新页面都需要重新设置标题。

四、实现跳转传参并改变标题

对于需要在跳转页面时传递参数并改变标题的需求，我们可以通过以下方式实现：

uni.navigateTo({
  url: '/pages/targetPage/targetPage?id=123&name=john',
  success: function () {
    uni.setNavigationBarTitle({
      title: '目标页面标题'
    });
  }
});

需要注意的是，应该在跳转成功的回调函数中设置目标页面的标题，否则可能会出现标题未被成功修改的情况。

五、总结

本文介绍了如何在uniapp中实现页面跳转传参和改变标题的基本操作。开发者在实际项目中，可以根据需要对代码进行进一步自定义。在开发中，不管是什么需求，都能够在uniapp中找到实现的方法。

这篇好文章是转载于：学新通技术网