mpvue——页面跳转

两个页面

两个页面的跳转,只是单纯的A->B这种跳转。

组件

直接使用小程序的组件，navigator，里面还有一些其他的参数，大家可以自行翻阅官方文档

<navigator url="./join/main" >参与场次</navigator>

API

保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

官方文档地址

html

<div class="detail-btn">
    <div>
      <img src="/static/images/game_count@3x.png" alt="参与场次">
      <span @click="openResult">参与场次</span>
    </div>
    <div>
      <img src="/static/images/game_log@3x.png" alt="奖品记录">
      <span @click="viewPrizeRecord">奖品记录</span>
    </div>
</div>

methods

mpvue页面跳转是兼容小程序的，所以小程序的跳转也是可以直接使用的，为了演示下面两个跳转都用了。

methods: {
      openResult () {
          wx.navigateTo({url: './join/main'})
        },
      viewPrizeRecord () {
          mpvue.navigateTo({url: './prize/main'})
        }
    }

下面的这个写法也可以，但是定义的常量名必须为url，还是比较推荐上面的写法

 methods: {
      openResult () {
         const url = './join/main'
         mpvue.navigateTo({url})
        },
      viewPrizeRecord () {
          mpvue.navigateTo({url: './prize/main'})
        }
    },

内页跳首页

我从A页面跳到B页面,然后从B页面跳首页,使用API wx.reLaunch()

html

<img @click="goHome" class="empty-btn" src="/static/images/btn1.png" alt="">

methods

 goHome () {
                 mpvue.reLaunch({url:'/pages/index/main'})
            },