您现在的位置是:首页 >技术杂谈 >小程序路由跳转网站首页技术杂谈

小程序路由跳转

zhaoyifei01 2023-06-11 04:00:04
简介小程序路由跳转

小程序中的路由只是单纯页面地址的跳转,一般在页面中使用 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(负数)

 

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。