微信小程序(一) 路由跳转

目录

1.wxml标签  

2.wx.navigateTo(Object object)

3.wx.redirectTo(Object object)

4.wx.reLaunch(Object object)

5.wx.navigateBack(Object object)

6.wx.switchTab(Object object)

---

页面层级示例

  页面层级关系示例  默认当前处于   "pages/ccc/todo/index"  页面中

    "pages": [

       "pages/aaa/index",

       "pages/bbb/index",

       "pages/ccc/index",

       "pages/ccc/todo/index"

     ]

1.wxml标签  <navigator></navigator>

    说明 : 页面内标签方式跳转，类似Vue   router-link   方式

    常用配置项 : {

       url  :  当前小程序内跳转链接,根目录路径或相对路径均可,

       open-type : 打开方式  [ ' navigate ' , ' redirect ' ,' switchTab '  ,' reLaunch ' ,' navigateBack '] 。默认第一项，向页面栈中push一个新的页面

    }

    举个🌰 :    从  "pages/ccc/todo/index"  跳转至目标界面  "pages/aaa/index" 

<navigator url='/pages/aaa/index'></navigator>

或

<navigator url='../../aaa/index'></navigator>

2.wx.navigateTo(Object object)

    说明:保留当前页面，跳转到小程序内的某个非tabbar页面

    再举个🌰 : 从  "pages/aaa/index"  跳转至目标界面 "pages/ccc/index"

    wx.navigateTo({
        url: '/pages/ccc/index'
    })

    // 或

    wx.navigateTo({
        url: '../ccc/index'
    })

3.wx.redirectTo(Object object)

    说明:关闭当前页面，跳转到小程序内的某个非tabbar页面

    还是🌰 : 从 "pages/ccc/index" 跳转至目标界面 "pages/bbb/index"

    // 其实可以看到跟上方的跳转方法基本一致只是换了个api而已
    wx.redirectTo({
        url: '/pages/bbb/index'
    })

    // 绝对路径及相对路径的就不再赘述了,不是深究的点

4.wx.reLaunch(Object object)

    说明: 清空页面栈,关闭所有页面，跳转到小程序内的某个非tabbar页面

    🌰🌰🌰 : 从 "pages/bbb/index" 跳转至目标界面 "pages/ccc/todo/index"

    wx.reLaunch({
        url: '/pages/ccc/todo/index'
    })

5.wx.navigateBack(Object object)

    说明:关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层，不额外传配置则默认返回上一层界面，相当于在小程序中的左滑操作

    好多 🌰🌰🌰

    // 不传额外配置,返回上一层页面
    // 当前页面为首页时,调用会报错。所以使用时候需要考虑业务场景。比如扫码进入等。
    wx.navigateBack();

    // 返回多级界面,
    wx.navigateBack({
      delta: 2 // 使用 getCurrentPages() 方法获取,如果delta大于现有页面数,则返回到首页
    });

    // getCurrentPages() =>  获取当前页面栈，返回值为一个数组
    // 使用示例
    let pages = getCurrentPages(), prevPage, currPage; // pages.length 即为页面总数
    // 1 跨页面操作
    prevPage = pages[pages.length - 2]; // 上一页面
    prevPage.setData({
        // 直接上一页面赋值
    });

    // 2 获取当前页面路由
    currPage = pages[pages.length - 1].route;

6.wx.switchTab(Object object)

    说明 : 跳转至tabBar页面并关闭其他所有非tabBar页面

    // 假设 '/pages/index/index' 为开发者在 app.json 的 tabBar 中配置的页面
    wx.switchTab({
      url: '/pages/index/index'
    })

    // 如果在使用该方法前不存在其他打开的 tabBar 页面,那么当前方法使用后再调用前文说到的 getCurrentPages().length 应该为1了

  文章参考链接: 小程序开发文档