(一)页面跳转的四种方法及页面跳转中相对路径问题

转载https://www.cnblogs.com/hrone/p/8067036.html
navigator导航组件

首先页面跳转的相对路径中经常出现“.. /”,例如“ 在这里插入图片描述 test/test”,这表示上一层页面下的test文件夹下的test页面

  1. wx.navigateTo({}) ,保留当前页面,跳转到应用内的某个页面,使用 wx.navigateBack 可以返回;
    示例:
//这种方式跳转的页面是非tabbar页面
wx.navigateTo({
    url:'../test/test?id=1&page=4',  //跳转页面的路径,可带参数 ?隔开,不同参数用 & 分隔;相对路径,不需要.wxml后缀
    success:function(){}        //成功后的回调;
    fail:function(){}          //失败后的回调;
    complete:function(){}      //结束后的回调(成功,失败都会执行)
})

传递的参数在接收页面onLoad()函数中得到值:option.id就可以得到了
onLoad: function (option) {
    console.log(option)//可以打印一下option看查看参数
    this.setData({
        id:option.id,
    });
  1. wx.redirectTo() , 重定向到某页面,调用此接口是先关闭当前页面,然后跳转到非tabBar的某个页面。
  2. 使用组件 示例: 点击跳转
    navigator——导航组件(页面链接,相当于a链接)
    在小程序中,页面跳转链接为navigator。
    1)属性——url
    在这里插入图片描述
    url为应用内的跳转链接,不允许跳外链。
    依旧使用test页面,test.wxml文件(也可以自行新建页面进行测试):
    在这里插入图片描述
    编译预览:
    (一)页面跳转的四种方法及页面跳转中相对路径问题_第1张图片
    点击链接,跳转到日志页面:
    (一)页面跳转的四种方法及页面跳转中相对路径问题_第2张图片
    2)属性——open-type
    在这里插入图片描述
    open-type属性的属性值有:
    (一)页面跳转的四种方法及页面跳转中相对路径问题_第3张图片
    ①redirect——重定向
    设置open-type属性的值为redirect。
    在这里插入图片描述
    编译预览,加open-type属性对链接的展示样式不影响:
    (一)页面跳转的四种方法及页面跳转中相对路径问题_第4张图片
    点击链接,跳转到日志页面:
    (一)页面跳转的四种方法及页面跳转中相对路径问题_第5张图片
    页面进行重定向,没有可以点击的返回按钮。
    redirect重定向可以用在检测用户登录信息是否失效,如果失效跳转到登录页面,那么这个登录页面就不能有返回按钮。
    ②switchTab——跳转tab栏页面使用

当不设置open-type属性时,跳转的页面为tabBar栏中的页面时,是不好使的。

跳转到首页页面,首页页面在tabBar栏。
在这里插入图片描述
编译预览:
(一)页面跳转的四种方法及页面跳转中相对路径问题_第6张图片
点击链接,跳转到首页,无任何反应,跳转失败。

注意: 在小程序中,当需要跳转到tabBar栏中存在的页面时,需要将open-type属性值设为switchTab。

设置open-type属性:
在这里插入图片描述
4. wx.switchTab ,跳转到tabBar的某个页面,
注意switchTab只能跳转到带有tab的页面,不能跳转到不带tab的页面

wx.switchTab({
      url: '../taste/index',   //注意switchTab只能跳转到带有tab的页面,不能跳转到不带tab的页面
    })

你可能感兴趣的:(微信小程序)