我要评论本篇文章给大家带来了关于微信小程序的相关知识，其中主要介绍了关于页面路由的相关内容，路由是指分组从源到目的地时，决定端到端路径的网络范围的进程，下面就一起来看一下，希望对大家有帮助。
【相关学习推荐：微信小程序】
什么是路由？
路由（routing）是指分组从源到目的地时，决定端到端路径的网络范围的进程。我们可以理解微信小程序页面路由，根据路由规则（路径）从一个页面跳转到另一个页面的的规则。
一、哪些会触发页面跳转
- 小程序启动，初始化第一个页面
- 跳转新页面，调用wx.navigateto 或者
- 页面重定向，调用wx.redirectto 或者
- 页面返回，调用wx.navigateback ,页面左上角返回按钮
- wx.switchtab实现tabbar页面切换
tips: 所有页面都必须在app.json中注册,例如
{
"pages": [
"pages/index/index",
"pages/classification/classification",
"pages/start/start",
"pages/detail/detail",
]
}登录后复制
二、微信小程序中实现页面路由的几种方式
- wx.navigateto，保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面
wx.navigateto({
url: 'pages/detail/detail',
success: function(res) {},
...
})登录后复制
- wx.redirectto,关闭当前页面，跳转到应用内的某个页面,但是不允许跳转到 tabbar 页面
wx.redirectto({
url: 'pages/detail/detail',
success:function(res){},
...
})登录后复制
-
组件跳转方式
<navigator url=pages/detail/detail">跳转</navigator>
登录后复制
- wx.navigateback返回上一页
wx.navigateback({
delta: 1,
})登录后复制
tips: delta为1时表示返回上一页，为2时表示上上一页，以此类推；如果dalta大于已打开的页面总数，则返回到首页。返回后，元界面会销毁
- 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'
})登录后复制
三、小程序路由实现原理
小程序路由是通过自己实现的一个栈(先进先出)来管理的。
当我们通过wx.navigateto或者
路由栈刚开始只存有页面a，当使用wx.navigateto跳转后，页面b推入路由栈并展示到界面上，页面a隐藏。
当我们使用wx.navigateback返回时
那么wx.redirectto与wx.navigateto有什么区别呢?
假如当前已经在二级页面b上，我们使用wx.redirectto跳转到c页面，其过程是这样的。
如当前已经在二级页面b上，我们使用wx.redirectto跳转到c页面，其过程是这样的。
[外链图片转存中…(img-mkpnbkug-1650431194878)]
页面b会被pop出，然后c页面再push进入栈，这个时候栈中还是只有两个页面。
【相关学习推荐：微信小程序】
以上就是微信小程序之页面路由知识点总结的详细内容，更多请关注代码网其它相关文章！
发表评论