您现在的位置是:首页 >技术杂谈 >小程序路由跳转网站首页技术杂谈
小程序路由跳转
小程序中的路由只是单纯页面地址的跳转,一般在页面中使用 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(负数)