uniapp跳转传参改变标题-猿码集

uniapp跳转传参改变标题

在开发uniapp应用的过程中，我们可能会遇到需要在页面跳转时传递数据并改变标题的需求。本文将详细介绍如何使用uniapp实现这一功能。

1. 使用navigateTo跳转页面

navigateTo是uniapp提供的一个页面跳转方法，通过该方法可以在不关闭当前页面的情况下跳转到另一个页面。使用该方法跳转页面并传递参数的代码如下：


// 当前页面
uni.navigateTo({
  url: '/pages/detail/detail?id=1',
  success: function(res) {
    console.log('跳转成功');
  }
});

在上述代码中，我们通过url参数指定了要跳转到的页面，并通过?id=1的形式向该页面传递了一个名为id的参数。接下来在要跳转到的页面中获取该参数并改变标题。

2. 获取跳转参数并改变标题

在要跳转到的页面中，我们可以通过uniapp提供的getApp().$options.globalData对象来获取到从上一个页面传递过来的参数。代码如下：


// detail页面
onLoad: function(options) {
  // 从全局对象中获取参数
  var id = getApp().$options.globalData.id;
  console.log(id);
  // 改变标题
  uni.setNavigationBarTitle({
    title: '详情页-' + id
  });
}

在上述代码中，我们通过onLoad生命周期函数获取到了传递过来的id参数，并通过uni.setNavigationBarTitle方法来改变页面标题。

3. 传递参数并跳转页面

现在我们已经知道如何获取跳转时传递的参数，并且也知道了如何在要跳转到的页面中修改标题。接下来我们来看一下如何在当前页面传递参数并跳转到另一个页面。

在当前页面中，我们可以借助uniapp提供的事件处理函数来实现页面跳转，并将要传递的参数添加到事件对象中。代码如下：


// 当前页面
goToDetail: function() {
  // 添加参数到事件对象中
  var event = {
    id: 1
  };
  // 触发跳转事件并传递参数
  this.$emit('goToDetail', event);
  // 关闭当前页面
  uni.navigateBack({
    delta: 1
  });
}

在上述代码中，我们通过this.$emit方法触发了一个名为goToDetail的自定义事件，并将要传递的参数id添加到事件对象event中。接下来使用uni.navigateBack方法关闭当前页面。下面我们来看一下如何在另一个页面中监听该事件并获取传递过来的参数。

4. 监听自定义事件并获取参数

在另一个页面中，我们可以使用uniapp提供的v-on指令来监听自定义事件，并通过$vnode.data.attrs获取参数。代码如下：


// detail页面
<template>
  <view>
    <text>{{title}}</text>
  </view>
</template>
<script>
  export default {
    data: function() {
      return {
        title: ''
      };
    },
    created: function() {
      // 监听事件并获取参数
      this.$on('goToDetail', function(event) {
        console.log(event.id);
        // 修改标题
        this.title = '详情页-' + event.id;
        uni.setNavigationBarTitle({
          title: '详情页-' + event.id
        });
      });
    }
  };
</script>

在上述代码中，我们通过this.$on方法监听了goToDetail事件，并通过event.id获取了传递过来的参数。接下来我们可以修改页面中的内容，并使用uni.setNavigationBarTitle方法来改变页面标题。

总结

本文详细介绍了如何使用uniapp实现跳转页面并传递参数并改变标题的功能。通过上述方法，我们可以在uniapp开发中轻松实现页面跳转与数据传递。

uniapp跳转传参改变标题