美文网首页
微信小程序 路由跳转传参和获取路由参数

微信小程序 路由跳转传参和获取路由参数

作者: 暴躁程序员 | 来源:发表于2023-09-27 16:42 被阅读0次

一、路由跳转的几种方式

// 参数
var Object = {
  url: '',  
  delta: 1, // 返回的页面数,如果 delta 大于现有历史页面数,则返回到首页。(只有 wx.navigateBack 生效)
  success: function(){}, 
  fail: function(){}, 
  complete: function(){}, 
}

// 保留当前页面、跳转到某个页面
wx.navigateTo(Object);

// 关闭当前页面,并返回到上一级页面或上多级页面(返回到历史页面)
wx.navigateBack(Object);

// 关闭当前页面,跳转到某个页面
wx.redirectTo(Object);

// 关闭所有页面,打开某个页面,返回的时候跳到首页
wx.reLaunch(Object);

// 关闭所有页面,跳转到 tabBar 页面
wx.switchTab(Object);

二、由跳转传参和获取路由参数

1. 传参方式一:通过在 url 后拼接字符串的方式发送参数

  1. 定义 wxml 模板页面
<view class="container">
  <view bindtap="fnOpenDetail" data-id="1"> 跳转到指定页面 </view>
</view>
  1. 定义 js 页面
Page({
  fnOpenDetail: function (e) {
    wx.navigateTo({
      url: "/pages/detail/index?id=" + e.currentTarget.dataset.id + "&title=标题",
      success: function (res) {},
      fail: function (err) {},
      complete: function () {},
    });
  },
});
  1. 在目标页面的 onLoad 函数中获取路由参数
Page({
  onLoad(options) {
    console.log(options.id, options.title);
  },
});

2. 传参方式二:通过事件发送和获取参数

  1. 定义 wxml 模板页面
<view class="container">
  <view bindtap="fnOpenDetail" data-id="1"> 跳转到指定页面 </view>
</view>
  1. 定义 js 页面
Page({
  fnOpenDetail: function (e) {
    wx.navigateTo({
      url: '/pages/detail/index',
      success: function(res) {
        const data = {
          id: e.currentTarget.dataset.id,
          title: '标题',
        }
        // 发送事件,携带参数
        res.eventChannel.emit('acceptDataFromOpenerPage', { data })
      },
      fail: function(err) {},
      complete: function() {},
    })
  },
})
  1. 在目标页面的 onLoad 函数中获取路由参数
Page({
  onLoad(options) {
    const eventChannel = this.getOpenerEventChannel()
    // 监听事件,获取参数
    eventChannel.on('acceptDataFromOpenerPage', function(data) {
      console.log(data.data.id,data.data.title)
    })
  }
})

相关文章

  • Next.js 跳转传参并接收接参

    介绍路由传参,接参使用方法 传参 + 跳转页面接收参数 动态路由传参 + 跳转页面接收参数创建动态路由在pag...

  • 微信小程序的周期解析

    微信小程序中的路由跳转方式(传参)通过navigateTo({})来进行页面的跳转 注意:保留当前页面,跳转到应用...

  • vue中组件3种编程式路由跳转传参

    路由传参 1、路由配置传参(刷新页面不会丢失参数,url会携带参数) A组件跳转B组件传参A组件 路由配置 B组件...

  • Taro 路由增强 2x 版本来了,可能是最好的 Taro 路由

    小程序的路由有什么问题 路由跳转的页面 url 没有类型提示容易输错 路由传参需要手动拼接参数、无法携带任意类型、...

  • Vue-Router

    1. 路由配置 默认路由跳转 在 new Router时可用的配置参数: 2.路由传参 Vue路由传参的几种方式 ...

  • vue传参

    一、路由传参 1.1、 明文传参 ( 特点:URL路径 显示传递的参数 ) 路由跳转: 传递参数 接收参数 1....

  • vue-8

    路由 路由传参$route.params.id获取路由上的参数 在js里定义路由组件: 编程式路由

  • flutter页面跳转 Route 使用汇总

    一、push方式直接跳转 普通跳转 带参数跳转和接收参数 构造函数直接传参 跳转后携带参数返回 二、命名路由跳转 ...

  • Vue实战第二天

    路由组件传参 动态路由传参 静态路由传参 函数传参htm5 history 模式 设置通用路由,找不到页面跳转自定...

  • 小程序

    git使用 flex布局 目录结构 注册页面 常用方法 路由 事件处理函数 传参获取跳转 获取传递的参数 点击获取...

网友评论

      本文标题:微信小程序 路由跳转传参和获取路由参数

      本文链接:https://www.haomeiwen.com/subject/fomkbdtx.html