微信小程序中路由跳转方式

这篇具有很好参考价值的文章主要介绍了微信小程序中路由跳转方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

常见的微信小程序页面跳转方式有如下:

  • wx.switchTab(Object)跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面(面全部出栈,只留下新的 Tab 页面)

  • wx.reLaunch(Object)关闭所有页面,打开到应用内的某个页面(页面全部出栈,只留下新的页面)

  • wx.redirectTo(Object)关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面(当前页面出栈,新页面入栈)

  • wx.navigateTo(Object)保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层(新页面入栈)

  • wx.navigateBack(Object)关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈,决定需要返回几层(页面不断出栈,直到目标返回页,新页面入栈)


wx.switchTab(Object)

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

需要跳转的 tabBar 页面的路径 (代码包路径)(需在 app.json 的 tabBar 字段定义的页面),路径后不能带参数。

wx.switchTab({
  url: '/index'
})

wx.reLaunch(Object)

关闭所有页面,打开到应用内的某个页面

需要跳转的应用内页面路径 (代码包路径),路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 path?key=value&key2=value2

wx.reLaunch({
  url: 'test?id=1'
})
Page({
  onLoad (option) {
    console.log(option.query) // 获取参数
  }
})

wx.redirectTo(Object)

关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

需要跳转的应用内非 tabBar 的页面的路径 (代码包路径), 路径后可以带参数。参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 & 分隔;如 path?key=value&key2=value2

wx.redirectTo({
  url: 'test?id=1'
})

wx.navigateTo(Object)

保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

需要跳转的应用内非 tabBar 的页面的路径 (代码包路径), 路径后可以带参数。参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 & 分隔;如path?key=value&key2=value2

wx.navigateTo({
  url: 'test?id=1',
  events: {
    // 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
  }
})

wx.navigateBack(Object)

关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈,决定需要返回几层文章来源地址https://www.toymoban.com/news/detail-861638.html

wx.navigateBack() // 返回上一页面

wx.navigateBack({
  delta: 2   // 向上返回2页
})

到了这里,关于微信小程序中路由跳转方式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序之间是如何跳转的,并携带参数

    要实现小程序之间的跳转,需要使用小程序的跳转 API。具体步骤如下:         1、在原小程序中,使用  wx.navigateToMiniProgram  API 跳转到目标小程序。         2、在目标小程序中,接收参数并进行处理。在目标小程序中,可以使用wx.getLaunchOptionsSync API获取原始启动参

    2024年02月16日
    浏览(49)
  • 微信小程序和H5之间相互跳转的几种情况

    直接通过web-view内嵌的方式,有且只有这一种方式。 H5内嵌在小程序的web-view中,想要打开小程序自身的页面,可通过 wx.miniProgram.navigateTo 方法,参考链接:web-view | 微信开放文档 (qq.com) H5在非小程序环境中,微信浏览器或者手机自带浏览器打开时,想要跳转到小程序,可通过

    2024年02月11日
    浏览(49)
  • 常见路由跳转的几种方式

    常见的路由跳转有以下四种: 1. router-link to=\\\"跳转路径\\\"  也可,如 2. this.$router.push() 跳转到指定的url,并在history中添加记录(即,点击回退,会退回上一个页面) 。 html中,如: 3. this.$router.replace() 跳转到指定的url, 但不会在history记录(即,点击回退 退回到上上个页) 4

    2024年02月10日
    浏览(44)
  • Vue路由跳转的几种方式

    跳转到指定的URL,在history栈中添加一个记录,点击后退会返回上一个页面。 用法同上,但是跳转到指定的url,不会向history里面添加新的记录,点击返回,会跳转到上上一个页面,上一个记录是不存在的。 浏览器在解析时,将它解析成一个类似于a标签。 router-link:可以一个组

    2024年02月06日
    浏览(54)
  • Vue路由跳转的五种方式

    路由跳转有两种形式:声明式导航、编程式导航 1. router-link 声明式 prop= :to=“…” 相当与 router.push(…) router-link中链接如果是’ / \\\'开始,就是从根路由开始 如果开始不带 ’ / \\\',则是从当前路由开始 例子 2. this.$router.push() 可追溯 编程式 router.push(…)//该方法的参数可以是一个

    2024年02月05日
    浏览(41)
  • uniapp路由跳转的六种方式

    uniapp官方文档详解: 一、uni.navigateTo保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。 注意: 页面跳转路径有层级限制,不能无限制跳转新页面 跳转到 tabBar 页面只能使用 switchTab 跳转 二、uni.redirectTo关闭当前页面,跳转到应用内的某个页面。

    2024年02月11日
    浏览(45)
  • vue中路由跳转的几种方式

    2、第二种也是比较常见的,使用标签跳转: 3、第三种是使用replace跳转: 4、第四种是使用go方式跳转:

    2024年02月11日
    浏览(58)
  • 【vue3】vue3路由跳转的方式

    如 : 有无this都行 $router.push(\\\'/plantduce\\\') this.$router.push(\\\'/plantduce\\\') vue3 || vue2 路由参考 useRouter 与 useRoute 都可以。

    2024年02月06日
    浏览(42)
  • 微信小程序 - 实时监听路由发生变化,当页面跳转发生变化时执行一段代码或函数,可获取目标页面的路径 URL 、路由参数、跳转方式、该页面的配置等(支持 “全局“ 和 “局部“ 两种写法)

    有时候,我们需要实时监听页面的跳转,并且拿到路由地址及参数。 实现了 在微信小程序开发中,每次切换页面时都触发一个函数,当路由发生变化后执行一段代码, 简单来说,相当于一个 “路由监听器”,当页面跳转时立即触发,然后拿到路由的 URL 和携带的参数,进行

    2024年02月12日
    浏览(100)
  • 微信小程序页面跳转方式+跳转小程序

    官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 跳转到其他页面(非tabBar页) 返回上一页面或返回多级页面 首先需要在当前小程序app.json中定义:需要跳转的小程序的app-id app.josn文件: 第一种方法:wx.

    2024年02月12日
    浏览(83)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包