小程序路由跳转

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