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

本文小编为大家详细介绍“微信小程序怎么实现页面路由”，内容详细，步骤清晰，细节处理妥当，希望这篇“微信小程序怎么实现页面路由”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

专注于为中小企业提供网站设计、网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业莱州免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了超过千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

什么是路由？

路由（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) {},
  ...
})

2. wx.redirectTo,关闭当前页面，跳转到应用内的某个页面,但是不允许跳转到 tabbar 页面

wx.redirectTo({
  url: 'pages/detail/detail',
  success:function(res){},
  ...
})

3. <navigator />组件跳转方式

<navigator url=pages/detail/detail">跳转</navigator>

4. wx.navigateBack返回上一页

wx.navigateBack({
	delta: 1,
})

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

5. 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'
})

读到这里，这篇“微信小程序怎么实现页面路由”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注创新互联行业资讯频道。

网页标题：微信小程序怎么实现页面路由
地址分享：https://www.cdcxhl.com/article42/joophc.html

成都网站建设公司_创新互联，为您提供营销型网站建设、标签优化、定制开发、网站制作、品牌网站设计、移动网站建设

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联