微信小程序常用路由跳转方法

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

1.声明式跳转(标签控制跳转)

        navigator 标签

        属性:

                url:要跳转的路径(可以使用相对路径,也可以使用绝对路径)

                open-type:跳转方式。默认值为 navigat ,不能跳转至tabBar页面。

                                    当值为  switchTab  时,可跳转至tabBat页面。

                                    当值为  navigateBack  时,点击可返回原页面。

                                    注:小程序跳转时严格区分tabBar页面与非tabBar页面。

                代码演示:<navigator open-type=" " url=" ">跳转</navigator>

2.编程式跳转(js控制跳转)

        wx.reLaunch 方法:关闭所有页面,打开到应用内的某个页面。

        参数:

                url:要跳转的路径。

        代码演示:wx.reLaunch({

                                url:" ",

                          })

        

        wx.redirectTo 方法:关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar                                          页面。

        参数:

                url:要跳转的路径。

        代码演示:wx.redirectTo({

                                url:" ",

                          })

3.跳转传参

        传参:

                在路径后面写上?后面写上要传的参数。传递多个之间使用&隔开

                代码演示:
                       

page({
        
    data:{
        name:"张三",
        sex:"男",
        age:22,
    },
    skip(){
        wx.redirectTo({
            url:"../index/index?name="+this.data.name"&sex="+this.data.sex"&age="+this.data.age
        })
    },
    
})

        接收:

                在跳转后页面的js文件的 onLoad 中接收。

                代码演示:

page({

    onLoad(options) {
        console.log(options);
        // options 就是传递过来的值
    },    

})

                文章来源地址https://www.toymoban.com/news/detail-487817.html

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

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

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

相关文章

  • 微信小程序路由跳转,API调用,页面传值

    wx.switchTab 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。 wx.reLaunch 关闭所有页面,打开到应用内的某个页面。 wx.redirectTo 关闭当前页面,跳转到应用内的某个页面。但是不能跳转到 tabbar 页面。 wx.navigateTo 保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面

    2024年02月12日
    浏览(45)
  • 【微信小程序】页面路由跳转函数之间的区别

    微信小程序开发系列 在开发微信小程序中基本都会用到页面跳转,微信小程序提供了几个页面跳转函数。它们之间有一些区别,试用用时需要注意,否则会达不到预期效果。下面介绍这几种页面跳转的的区别。 一共提供了五个页面跳转函数,它们都支持 Promise 风格 调用。

    2024年02月12日
    浏览(64)
  • 微信小程序中路由跳转的方式有哪些?区别?

    微信小程序拥有 web 网页和 Application 共同的特征,我们的页面都不是孤立存在的,而是通过和其他页面进行交互,来共同完成系统的功能 在微信小程序中,每个页面可以看成是一个 pageModel , pageModel 全部以栈的形式进行管理 常见的微信小程序页面跳转方式有如下: wx.navig

    2024年02月01日
    浏览(43)
  • 【面试合集】说说微信小程序中路由跳转的方式有哪些?区别?

    微信小程序拥有 web 网页和 Application 共同的特征,我们的页面都不是孤立存在的,而是通过和其他页面进行交互,来共同完成系统的功能 在微信小程序中,每个页面可以看成是一个 pageModel , pageModel 全部以栈的形式进行管理 常见的微信小程序页面跳转方式有如下: wx.navig

    2024年01月19日
    浏览(50)
  • 微信小程序页面跳转方法

    微信小程序页面跳转的各种方法总结,备查。 保留当前页面,跳转到应用内的某个页面。可以通过调用 wx.navigateBack 返回到原页面。跳转后左上角出现返回小箭头,点击后可返回原本页面。示例代码: 使用场景 适用于需要跳转到新页面并保留原页面状态的情况,比如从列表

    2024年02月04日
    浏览(48)
  • 微信小程序页面跳转(三种方法)

    这里是指函数接收一个字典,其中 url 对应的值是一个 String 就是我们要跳转的页面地址。 同时在对应页面也需要编写相应的 js 方法接受参数。也就是监听页面加载的生命周期函数 -- onload: function (options) ,页面跳转过来之后自动执行该方法。参数 options 就是我们传递的参数

    2024年02月11日
    浏览(60)
  • 微信小程序跳转传参的方法

    目的: 带着第一个页面的id,传到第二个页面,实现同一个页面,点击不同商品显示对应的数据 首先在第一个页面的js文件中写好接口 随后在wxml中写上点击事件,注意这个 data-id=\\\"{{item.id}}\\\" 随后在写上点击事件 先console一个e 看需要拿到什么数据  console的结果是 currentTarget下

    2024年02月06日
    浏览(53)
  • 微信小程序跳转页面的不同方法

    微信小程序如何进行页面切换呢? 1.对于tabbar页面的跳转 (若不明白tabbar可自行百度) 使用 switchTab 进行跳转 在wxml中输入 navigator url=\\\"/pages/message/message\\\" open-type=\\\"switchTab\\\"非tabbar页面的跳转/navigator 其中/pages/message/message是跳转的地址,跳转方式是switchTab 2.对于非tabbar页面的跳转

    2024年02月15日
    浏览(42)
  • 微信小程序跳转外链,打开视频号及小程序内跳转方法

    现有一轮播图,要求按照配置进行跳转 1,跳转至外部链接 2,跳转至视频号 3,跳转至本小程序内页面(非底部切换) 以上为小程序几种跳转方法,还请大佬多多指教!

    2024年02月11日
    浏览(46)
  • 微信小程序 跳转页面经常会遇到判断是否登录情况。基于此需求,做了一个路由跳转拦截的jump组件

    组件代码非常简单 在根目录创建components目录 在components目录新建jump目录 在jump目录新建四个文件 index.js index.json index.wxml index.wxss 这个样式文件内容空就行

    2024年02月09日
    浏览(54)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包