您现在的位置是:首页 >技术杂谈 >小程序路由跳转网站首页技术杂谈
小程序路由跳转
小程序中的路由只是单纯页面地址的跳转,一般在页面中使用 navigator 组件来实现,也有很多场景需要在 js 中根据逻辑的执行结果跳转到某个页面,比如:如果检测到用户尚未登录就需要给他跳转到登录页面
1.1navigate
navigate 跳转到一个新的页面,会新增一条历史记录,并且可以通过左上角的返回按钮实现返回操作
<navigator> 标签方式:
`pages/index/index.wxml`
<!-- open-type="navigate" 是默认值 -->
<navigator open-type="navigate" url="/pages/logs/logs">去日志页面</navigator>
js api 方式:
pages/index/index.js
wx.navigateTo({
url: '/pages/logs/logs'
})
2.2wx.switchTab
如果要跳转的页面路径是一个 tabBar 的页时,不能使用 navigate。要使用 switchTab
新建 pages/cart/index
创建两个 tabbar
app.json

`<navigator>` 标签方式:
pages/index/index.wxml
`<navigator>` 标签方式:
pages/index/index.wxml
js api 方式:
pages/index/index.js
wx.switchTab({
url:'/pages/cart/index'
})
1.3redirect
使用 redirect 跳转页面,它替换掉上一次路由记录,所以不会新增一次历史记录。类似于 vue 中的 router.replace('页面地址')
操作:新建 router 页面。从 首页 => 日志页面(使用redirect跳转到路由页面) => 路由页面
<navigator> 标签方式:
pages/logs/logs.wxml
<navigator open-type="redirect" url="/pages/router/index">去路由页面</navigator>
js api 方式:
pages/logs/logs.js
wx.redirectTo({
url:'/pages/router/index'
})
1.4reLaunch
使用reLaunch 跳转页面,它会把之前的路由记录全部干掉。
从 首页 => 日志页面 => 路由页面(使用reLaunch跳转到日志页) => 日志页面
`<navigator>` 标签方式:
pages/router/index.wxml

js api 方式:
pages/router/index.js

1.5 wx.navigateBack
wx.navigateBack 返回页面,参数 delta 可以指定返回前几个页面。类似于 vue 中的 router.go(负数)






U8W/U8W-Mini使用与常见问题解决
QT多线程的5种用法,通过使用线程解决UI主界面的耗时操作代码,防止界面卡死。...
stm32使用HAL库配置串口中断收发数据(保姆级教程)
分享几个国内免费的ChatGPT镜像网址(亲测有效)
Allegro16.6差分等长设置及走线总结