作者 adminz 发布于 2019-04-14 修改于

mpvue小程序——页面跳转和传参

一、小程序中页面跳转方式

1、a 标签:使用 Html 的 a 标签,href 参数,例如:

<a href="/page/test/main?id=1">

2、使用小程序的组件:navigator

详细参数见官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

<navigator url="/page/test/main?id=1">
跳转到新页面
</navigator>

3、使用小程序路由 API

详见官方文档 => api => 路由:

https://developers.weixin.qq.com/miniprogram/dev/api/wx.navigateTo.html

wx.switchTab() 只能在已经定义了 tabBar 页面时才起作用,也就是在 app.json 文件 tabBar 配置项中已有的页面才会出现 tabBar ,也才能使用 wx.switchTab() 跳转。

 

二、小程序中路由传参

(1).在onLoad中

// test.js
Page({
  onLoad(option) {
    console.log(option.query)
  }
})

(2) 在mounted函数里:

通过 this.$root.$mp.query 获取小程序在 page onLoad 时候传递的参数。

通过 this.$root.$mp.appOptions 获取小程序在 app onLaunch/onShow 时候传递的参数。

 

三、实例

例如,要在 index 页中打开 test 页:

3.1 先在 index 页模板中定义页面跳转方法:这里定义为 openTest

<span @click="openTest">打开test页面</span>

3.2 在 index 页面的 main.js 中,定义 openTest

methods: {
      openTest () {
          wx.navigateTo({url: '/page/test/main?id=1'})
      }
}