《微信小程序-基础篇》带你了解小程序的路由系统（二）_微信小程序 路由第二表

大家好，这是小程序系列的第五篇文章，前几篇我们都是在分享了关于小程序的一些基本知识，只有知道了一些基本知识我们才能有序的开展项目的开发，可能很多小伙伴会觉得枯燥，熬一下过去就好了，地址如下：
1.《微信小程序-基础篇》初识微信小程序
2.《微信小程序-基础篇》带你快速了解小程序的基础语法
3.《微信小程序-基础篇》什么是组件化以及如何封装小程序组件
4.《微信小程序-基础篇》带你了解小程序的路由系统（一）
这一篇文章分享的是关于小程序中路由系统的一些基本知识，通过本文我们可以了解到在小程序中如何进行页面的路由跳转，只有知道了这些，我们才能开发一个多页切换的小程序，毕竟不可能哪个小程序会只有一个页面，对吧~
介绍完基础以后会实际同步开发一个微信小程序的项目并开源，项目的主题暂定是原神的资料站~~~
–
最后，求关注，求收藏，求点赞，谢谢～

前言

在上一章节中我们主要分享了关于路由系统的一些基本知识，其目的是让刚接触的小伙伴知道 什么是路由系统 ，之后我们又分享了一下路由系统中的前端路由，我们知道虽然后端路由SEO等推广比较好，但是 对服务器、带宽等要求比较相对比较高，因此衍申出了前端路由，前端路由简单的说就是服务器在接到首次请求的时候就将所有资源一次性的发送给了前端，之后界面的切换，跳转通通前端自己搞定 …
而本章节，我们主要介绍的是 关于小程序的路由系统，耐心看完，你一定有所搜获～

阅读对象与难度

本文难度属于：初级，通过本文，你可以了解到 小程序中路由系统的基本用法，其各个API如何使用，以及如何携带参数进行页面跳转；

小程序中的路由系统

由于上一篇篇幅有限，导致介绍的优点仓促，这次补充一下，通过之前的文章我们知道，小程序可以在app.json中注册多个页面，如下图

这里注册了4个界面，分别是欢迎页，加载页，首页，和日志页，假设现在欢迎页结束后需要跳转到首页，这个跳转该怎么实现？这个就是本文的重点，小程序中的路由系统，该系统由小程序官方提供，官方原话：在小程序中所有页面的路由全部由框架进行管理。也就是说，小程序的路由系统它已经内置完了，并不能外界更改，我们作为使用者，跟着他提供的API用就行了；

API

官方提供的API，一共有几个，如下

下面我们一个一个说…很简单，并不复杂…

wx.navigateTo（Object object）

保留当前页面，跳转到应用内的某个页面，但是 不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈 最多十层；什么意思呢？就是说通过wx.navigateTo跳转的页面，它是能被后退按钮返回的，并且它不能跳转到底部tabbar指向的页面；
这是最常用的路由跳转之一，用法非常简单，它就是一个函数，并且接收一个对象作为参数，参数有以下几种

这几个当中必须要讲一下的就是url这个参数， 这个才是最重要的，毕竟执行了跳转，去往哪个页面就是这个参数决定的，看个代码示例，一个按钮，点击了执行跳转功能

<button bindtap="bindButtonTap" >点击我</button>
1

//index.js
Page({
  data: {

  },
  //事件处理函数
  bindButtonTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {},
})
1
2
3
4
5
6
7
8
9
10
11
12
13

就这么简单，那如果要带参数呢？表格中已经告诉我们了，在url的后面可以拼接，比如

//index.js
Page({
  data: {

  },
  //事件处理函数
  bindButtonTap: function() {
    wx.navigateTo({
      url: '../logs/logs?id=1'
    })
  },
  onLoad: function () {},
})
1
2
3
4
5
6
7
8
9
10
11
12
13

这里id的值可以 换成变量拼接 ，只要能是变量，那么值就可以自己随便获取替换了；

wx.redirectTo(Object object)

这个用法和wx.navigateTo几乎相同，这个方法也非常常用，最大的区别在于，通过wx.redirectTo跳转的界面不能被后退按钮返回，跳过去后，当前界面就 会被销毁 了，当然，这种跳转方式的页面 也不能是tabBar 的页面的路径；

参数的话也比wx.navigateTo少一个，主要是wx.navigateTo中的event是用来做页面通信的，而wx.redirectTo执行的跳转页面都已经被销毁了，自然也用不着通信；
用法一摸一样，就不多说了

//index.js
Page({
  data: {

  },
  //事件处理函数
  bindButtonTap: function() {
    wx.redirectTo({
      url: '../logs/logs?id=1'
    })
  },
  onLoad: function () {},
})
1
2
3
4
5
6
7
8
9
10
11
12
13

wx.navigateBack(Object object)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层；
简单的说，这个函数 用于回退 ，上面两个函数不是用来跳转吗，假设现在跳转错了，要返回上一个页面怎么办，自然是通过wx.navigateBack退回去了

和上面wx.navigateTo等参数不同的地方在于，它接收的 对象中delta是一个数字类型，这个参数的意思是你要退回第几页，我们知道通过wx.navigateTo跳转的页面一共会缓存10页，超过10页的部分会被逐渐替换掉，因此，这里的
delta代表的是返回的页面数，看个例子，官网的

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码

// 此处是 A 页面
wx.navigateTo({
  url: 'B?id=1'
})

// 此处是 B 页面
wx.navigateTo({
  url: 'C?id=1'
})

// 在 C 页面内 navigateBack，将返回 A 页面
wx.navigateBack({
  delta: 2
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

例子上面的注释还是挺清晰的，大致就是先从A页面跳转到了B页面，然后再从B页面跳转到了C页面，在C页面中有一个事件，这个事件触发后回退了2页，那么此时显示的页面A页，那假如回退delta的参数是3，会什么结果？答案 还是A页面，参数说明中说了，超出现有页面树的话就还是第一页；

wx.switchTab(Object object)

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
上面说了，wx.navigateTo和wx.redirectTo跳转的页面都必须是 非tabBar的页面，先解释一下什么是tabBar吧，经过小程序官方大量统计，官方发现，绝大多数小程序都会有一个地步的tab页面（就是用来切换页面的），就是这种的（截图来自于CSDN官方小程序）

因此，官方把这个底部的tabBar给内置了，它可以在app.json中直接配置（具体怎么配置下次介绍，或者有兴趣的小伙伴可以自行到官网查阅），大致就是这种

// app.json
{
  "tabBar": {
    "list": [{
      "pagePath": "index",
      "text": "首页"
    },{
      "pagePath": "other",
      "text": "其他"
    }]
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

看到参数应该明白了吧，具体用法和wx.navigateTo及wx.redirectTo一样

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

wx.reLaunch(Object object)

关闭所有页面，打开到应用内的某个页面，这个怎么说呢，就是先将wx.navigateTo存储的10界面都给干掉，然后再进行跳转，使用频率相对没有wx.navigateTo等来的高；

具体使用依旧非常简单，没啥可说的

wx.reLaunch({
  url: 'test?id=1'
})
1
2
3

小结

本文主要介绍了小程序中的路由系统，路由系统是整个小程序中运行的关键一环，它承载着页面与页面之间的联系，由于微信小程序中路由系统依旧 被完整的内置了，因此作为使用者的我们只需要 跟着API使用就行，接着我们分享了一下小程序中路由跳转的几个API，并描述了其参数和具体使用的例子；