微信小程序怎么实现页面路由

2022-06-15 09:12:26

什么是路由?

路由(routing)是指分组从源到目的地时,决定端到端路径的网络范围的进程。我们可以理解微信小程序页面路由,根据路由规则(路径)从一个页面跳转到另一个页面的的规则。


一、哪些会触发页面跳转

  1. 小程序启动,初始化第一个页面

  2. 跳转新页面,调用wx.navigateTo 或者 <navigator />

  3. 页面重定向,调用wx.redirectTo 或者 <navigator />

  4. 页面返回,调用wx.navigateBack ,页面左上角返回按钮

  5. wx.switchTab实现tabBar页面切换

Tips: 所有页面都必须在app.json中注册,例如

{
    "pages": [
        "pages/index/index",
        "pages/classification/classification",
        "pages/start/start",
        "pages/detail/detail",  
    ]
}

二、微信小程序中实现页面路由的几种方式

  1. wx.navigateTo保留当前页面,跳转到应用内的某个页面,但是不能跳到 tabbar 页面

wx.navigateTo({
  url'pages/detail/detail',
  success: function(res) {},
  ...
})
  1. wx.redirectTo,关闭当前页面,跳转到应用内的某个页面,但是不允许跳转到 tabbar 页面

wx.redirectTo({
  url'pages/detail/detail',
  success:function(res){},
  ...
})
  1. <navigator />组件跳转方式

<navigator url=pages/detail/detail">跳转</navigator>
  1. wx.navigateBack返回上一页

wx.navigateBack({ delta1,
})

Tips: delta为1时表示返回上一页,为2时表示上上一页,以此类推;如果dalta大于已打开的页面总数,则返回到首页。返回后,元界面会销毁

  1. wx.switchTab跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
    app.json:

{
  "tabBar": {
    "list": [{
        "pagePath""pages/index/index",
        "text""首页",
    },
    {
        "pagePath""pages/car/car",
        "text""购物车",
      },
   ...
  }
}

index.js:

wx.switchTab({
  url'pages/car/car' })