• 基于Taro开发小程序笔记--04路由跳转的几种方式


    • wx.navigateTo
    带单个字符参数xxx
    wx.navigateTo({ url:
    'page/home/home?params=xxx' })

    带字符串对象Object
    wx.navigateTo({
      url: 'page/home/home?params=JSON.stringify(Object)' })
    注意: 保留当前页面,跳转到应用内的某个页面,调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,使用wx.navigateBack可以返回到上一级页面。 
    • wx.navigateBack
    wx.navigateBack({
      delta: 2
    })

    注意:
    关闭当前页面,返回上一页面或多级页面。可通过 Taro.getCurrentPages() 获取当前的页面栈,决定需要返回几层。
    • wx.redirectTo
    wx.redirectTo({
      url: 'page/home/home?params=xxx'
    })
    
    注意: 关闭当前页面,跳转到应用内的某个页面。当前页面将不在路由堆中。
    • wx.switchTab
    wx.switchTab({
      url: 'page/tab/tab1'
    })
    
    注意:跳转到tabBar选中的页面,同时关闭其他非tabBar页面。
    • wx.reLanch
    wx.reLanch({
      url: 'page/home/home?params=xxx'
    })
    
    注意:关闭所有页面,打开到应用内的某个页面。
    • getCurrentPages() 获取当前的页面栈
    // 当前页面中
    var pagesArray = wx.getCurrentPages();
    pagesArray.map((item) => {
    // 可以为上级的home页面设置一个data数据标识isRouteId, 这样可以在home页面中通过路由获取到 
      if (item.route.indexOf('home') != -1) {
        item.setData({
          isRouteId: '2'
        })
      }
    })
    
    //home页面中
    componentDidShow() {
      // 获取当前路由判断是否要返回上一页
      var curpages = wx.getCurrentPages();
      curpages.map((item) => {
        if (item.route.indexOf('xxx') != -1) {
          if (item.data.isRouteId == '2') {
            Taro.redirectTo({
              url: '/pages/bbb/aaa'
            })
          }
        }
      })
    }
    •  在页面组件中跳转(可以通过设置open-type属性指明页面跳转方式)
    // navigator 组件默认的 open-type 为 navigate 
    <navigator url="/pages/home/home?params=xxxx">跳转到新页面</navigator>
    // redirect 对应 API 中的 wx.redirect 方法
    <navigator url="/pages/xx/xx" open-type="redirect">在当前页打开</navigator>
    // switchTab 对应 API 中的 wx.switchTab 方法
    <navigator url="/pages/index/index" open-type="switchTab">切换 Tab</navigator>
    // reLanch 对应 API 中的 wx.reLanch 方法
    <navigator url="/pages/xxx/xxxx" open-type="reLanch">关闭所有页面,打开到应用内的某个页面</navigator>
    // navigateBack 对应 API 中的 wx.navigateBack 方法
    <navigator url="/pages/index/index" open-type="navigateBack">关闭当前页面,返回上一级页面或多级页面</navigator>

    总结:上面的路由有关的跳转方式和路由拦截,基本可以满足项目的需求。后面有遇到特别的应用场景可以加进去。

     



  • 相关阅读:
    [Memcached]操作
    [Linux-CentOS7]安装Telnet
    PAT Advanced 1093 Count PAT's (25分)
    PAT Advanced 1065 A+B and C (64bit) (20分)
    PAT Advanced 1009 Product of Polynomials (25分)
    PAT Advanced 1008 Elevator (20分)
    PAT Advanced 1006 Sign In and Sign Out (25分)
    PAT Advanced 1002 A+B for Polynomials (25分)
    半年分布式处理回顾&机器学习(一)——线性回归
    PAT Advanced 1147 Heaps (30分)
  • 原文地址:https://www.cnblogs.com/zjlx/p/10282704.html
Copyright © 2020-2023  润新知